海报不支持video.js的HTML5视频

Question

我试图在我的网页中嵌入HTML视频播放器。我也使用video.js来控制它。下面是它的外观：
的HTML：

<video width="100%" poster="/resources/video/video-poster.jpg" class="video-js vjs-default-skin vjs-big-play-centered" id="myvideo"> 
     <source type="video/mp4" src="/templates/05.mp4"></source> 
     <source type="video/flv" src="/templates/05.flv"></source> 
     <source type="video/webm" src="/templates/05.webm"></source> 
</video> 

的JavaScript：

$(function() 
{ 
    var player_name = _V_('#myvideo'); 
    $(player_name).ready(function() 
    { 
     console.log('ready'); 
     player_name.addEvent('ended', function(){ 
      player_name.posterImage.show(); 
      $('.video-play').fadeIn(); 
      console.log('finished'); 
     }); 
    }); 
}); 

问题是：海报并没有在这种情况下出现。如果我不使用JS代码，那么海报就会出现。似乎如果试图获得播放器实例，

var player_name = _V_('#myvideo'); 

然后海报不起作用。如果我删除它，海报的作品。我想在开始和结束之后展示海报。任何帮助？这样做的

Answer 1

一种方式适合你的问题：

<script type="text/javascript"> 
var video= $('#myvideo')[0]; 
var videoJ= $('#myvideo');   
videoJ.on('ended',function(){ 
    video.load();  
}); 
</script> 

这种方法的警告再次，并根据缓存设置请求媒体URL可以重新下载全长媒体资源造成不必要的网络/ CPU使用情况。

解决此问题的更合适的方法是使用和覆盖图像/ div并绑定click/touchstart事件以显示视频标记并隐藏覆盖图。当结束事件触发时，只需隐藏视频标签并显示叠加图像。