海報不適用於帶有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使用率。

解決此問題的一種更合適的方法是使用並覆蓋image / div並在其上綁定click / touchstart事件以顯示視頻標簽並隱藏覆蓋。 結束事件觸發后，只需隱藏視頻標簽並顯示疊加圖像即可。