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

Question

I am trying to embed HTML video player in my webpage. I am also using video.js to get some controls over it. Here is how it looks:
The 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>

The 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');
        });
    });
});

Problem is: the poster does not show up in this case. If I do not use JS code, then the poster show up. Seems like if try to get the player instance,

var player_name = _V_('#myvideo');

then the poster does not work. If I remove it, poster works. I wanted to show the poster at beginning, and also after finished. Any help?

Answer 1

One way of doing this that fits your question:

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

This method has the caveat to request the media URL again and depending on caching settings it may re-download the full-length media resource causing unnecessary network/CPU usage for the client.

A more appropriate way to solve this issue is to use and overlay image/div and bind a click/touchstart event on it to show the video tag and hide the overlay. When the ended event has fired just hide the video tag and show the overlay image.