html5 video redisplay poster image onMouseOut

Question

How can I 'stop' a html5 video playback, and revert to poster image? Until this.play() is called, the poster image is showing properly.

My code:

<video loop="loop" onMouseOver="this.play();" onMouseOut="this.pause();" poster="/oceans-clip.thumb.jpg">
    <source src="/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

This is working as expected, however I want to revert to poster image onMouseOut instead of just pausing the video. What's a good way to do this?

Answer 1

I've been googling for solution for this problem and apparently,

Steve Lacey's solution:

Sure. You could do the equivalent of 'video.src = "";

appears to work on my OSX 10.9, in browsers: Safari 7.0, Firefox 26.0 and Chrome 31. I haven't tested it on mobile devices though.

I've tested it using video object created with JS:

var object = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
object.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources

Now when I want to stop video and show poster again, I just do:

object.pause();
object.src = "";

But, that's not enough since video will not be able to play again. To make it playable after this point, I removed 'src' attribute (while leaving 'source' sub-objects as is):

object.removeAttribute("src");

After this it works:

1. play video
2. on stopping video, poster will re-appear
3. can play same video again

Answer 2

The spec rules this out:

the poster frame should not be shown again after a frame of video has been shown

Ie if you want behaviour different to the spec you'll need to implement it yourself, maybe by using an element that overlays the video which contains the desired image and then hide/show it.

Answer 3

这篇文章很旧，但我遇到了同样的问题并像这样解决了它。

onmouseout="this.load();"

Answer 4

i used it and it is good with me

$('container video').hover(function () {$(this).get(0).play();}
   ,function () {$(this).get(0).load();});});

Answer 5

This works for me:

<div class="rollover">
  <video class="thevideo" loop poster="" height="100" width="250">
    <source src="" type="video/mp4" >
          Your browser does not support the video tag.
  </video>
</div>

<script>
    var figure = $(".rollover").hover( hoverVideo, hideVideo );

    function hoverVideo(e) {  
        $('video', this).get(0).play(); 
    }

    function hideVideo(e) {
        $('video', this).get(0).pause(); 
        v=$('video', this).get(0).currentSrc;
        $('video', this).get(0).src = "";
        $('video', this).get(0).src = v;   
    }
</script>

Answer 6

You can use:

    <script type="text/javascript">
    function videostop() {
      window.location.reload()
    }
    </script>

That will not really stop your video, it will reload the whole document. The "Poster Frame" will be shown.

Richie

PS I'm from Germany. Sorry if my English is bad. But I think, my JavaScript is OK :-)