我如何让 video.js 在 Nuxt 中工作答案

【问题标题】：how cam I make video.js work In the Nuxt我如何让 video.js 在 Nuxt 中工作
【发布时间】：2017-11-02 04:01:25
【问题描述】：

我在 Nuxt 框架中使用 video.js，视频工作正常，但有些出乎意料，这是我的 nuxt.config.js：

head: {
    title: 'starter',
    meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
       { hid: 'description', name: 'description', content: 'Nuxt.js project'          }
    ],
    link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        { rel: 'stylesheet', href: 'http://vjs.zencdn.net/5.19/video-js.css' }
    ],
    script: [
        {src: 'http://vjs.zencdn.net/ie8/1.1/videojs-ie8.min.js'},
        {src: 'http://vjs.zencdn.net/5.19/video.js'}
    ]
}

这是我的 vue：

<video id="example_video_1" class="video-js vjs-default-skin" controls     preload="none" width="100%" height="300" data-setup="{}">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>

[Vue 警告]：

The client-side rendered virtual DOM tree is not matching server-rendered     content. This is likely caused by incorrect HTML markup, for example nesting    block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

并且视频按钮栏不起作用。我会很高兴得到任何形式的支持。

【问题讨论】：

标签： vue.js video.js nuxt.js

【解决方案1】：

如果在<video> 元素中将data-setup="{}" 替换为setup="{}"，此警告将消失。

【讨论】：