2017-06-01 128 views
1

我使用的Video.js在Nuxt幀,視頻是做工精細,但一些超出預期的,這是我nuxt.config.js:怎麼凸輪我做的Video.js工作在Nuxt

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. 

和視頻按鈕欄是不行的。 我很樂意提供任何形式的支持。

回答

0

如果在<video>元素中將data-setup="{}"替換爲setup="{}",則此警告消失。