html5 video redisplay poster image onMouseOut

问题

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?

回答1:

The spec rules this out:

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

I.e. 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.

回答2:

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:

play video
on stopping video, poster will re-appear
can play same video again

回答3:

This post is old but I had the same problema and solve it like this.

onmouseout="this.load();"

回答4:

i used it and it is good with me

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

回答5:

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

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

来源：https://stackoverflow.com/questions/5920830/html5-video-redisplay-poster-image-onmouseout

标签

javascript

html

video

html5-video