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:

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