Geek Answers Handbook

Html5 video redisplay poster image onMouseOut

How can I stop html5 video playback and return to the poster image? Until this.play() is called, the poster image is displayed correctly.

My code is:

 <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 works as expected, however I want to return to the onMouseOut poster image, and not just pause the video. What a good way to do this?

+4
source share
4 answers

spec defines this:

the poster frame should not be displayed again after the movie frame is displayed

those. if you want behavior that is different from the specification, you need to implement it yourself, perhaps using an element that overlays a video that contains the desired image and then hides / shows it.

+8
source

I was looking for a solution to this problem and apparently

Steve Lacey's solution:

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

It seems to work on my OSX 10.9, in browsers: Safari 7.0, Firefox 26.0 and Chrome 31. However, I have not tested it on mobile devices.

I tested it with a video object created using 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 that I want to stop the video again and show the poster, I just do:

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

But this is not enough, since the video will not be able to play again. To make it reproducible after this point, I removed the 'src' attribute (leaving the "source" sub-objects as they are):

 object.removeAttribute("src");

After that it works:

  • video playback
  • when the video is stopped, the poster will reappear
  • can play the same video again
+8
source

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

 onmouseout="this.load();"
+1
source

You can use:

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

This will not stop your video, it will reload the entire document. The poster frame will be displayed.

Richie

PS I am from Germany. Sorry if my english is bad. But I think my JavaScript is fine :-)

-5
source

More articles:


All Articles