Question

我在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'}
    ]
}

这是我的观点：

<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.

视频按钮栏不起作用。我很乐意获得任何支持。

Answer 1

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

我如何使视频.js工作在Nuxt

1 个答案: