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使用。

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

海报不适用于带有video.js的HTML5视频

1 个答案: