Javascript – html5 video redisplay poster image onMouseOut

htmlhtml5-videojavascriptvideo

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?

Best Answer

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.

Related Topic