How to show html5 video poster end of video play?

问题

I want to show video poster after play. I am trying following code but no luck.

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    this.posterImage.show();
});

回答1:

A more straightforward way of doing this:

<script type="text/javascript">
var video= $('#cms_video').get(0);       
video.addEventListener('ended',function(){
    video.load();     
},false);
</script>

Which is a shortcut to loganphp answer. Indeed when changing the src of a video tag you implicitly call a load() on it.

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. But still it does answer the question the way loganphp asked it.

If you want to bypass this caveat you can 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.

回答2:

Finally I achieved my goal with following code

var video=$('#cms_video').get(0);        
video.play();
video.addEventListener('ended',function(){
    v=video.currentSrc;
    video.src='';
    video.src=v;            
});

回答3:

Simply at the end of video, show a div with the same src of the poster (with upper z-index or hide the video) If you need to replay the video, bind a click event on the showed div (to switch visibility and replay)

回答4:

**video start autoplay and Poster showing at end of video **

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<body>
<script type="text/javascript">
document.observe('dom:loaded', function(evt){
    $$('video').each(function(elm){
        elm.play();
      var wrapper = elm.wrap('span');
      var vid = elm.clone(true);
      elm.observe('ended', function(){
        wrapper.update(vid);
     });
    });
});

</script>
<video id="myvideo" poster="1.png" >
    <source src="1.mp4" type="video/mp4" />
</video>

回答5:

Try to give your poster an id or class then you can do:

var video=$('#cms_video').get(0);
video.play();
video.addEventListener('ended',function(){
    $('#poster').show();
    // ^ Use . here if you apply class instead of if for your poster 
});

来源：https://stackoverflow.com/questions/22859656/how-to-show-html5-video-poster-end-of-video-play

标签

javascript

jquery

html5

html5-video