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

【问题标题】：Poster does not work with HTML5 video with video.js海报不适用于带有 video.js 的 HTML5 视频
【发布时间】：2014-04-09 17:33:21
【问题描述】：

我正在尝试在我的网页中嵌入 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');

然后海报不起作用。如果我删除它，海报就可以了。我想在开始时和完成后展示海报。有什么帮助吗？

【问题讨论】：

标签： javascript jquery html5-video video.js

【解决方案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 事件以显示视频标签并隐藏覆盖。当结束事件触发时，只需隐藏视频标签并显示叠加图像。

【讨论】：