CODEWITHSUNDEEP
javascripthtmlvideohtml5-video
Jon Skarpeteig
Jon Skarpeteig

Reputation: 4128

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?

Upvotes: 4

Views: 10891

Answers (6)

Alexius The Coder
Alexius The Coder

Reputation: 103

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>

Upvotes: 0

Doaa Al-aref
Doaa Al-aref

Reputation: 1

i used it and it is good with me

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

Upvotes: 0

JMRM
JMRM

Reputation: 91

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

onmouseout="this.load();"

Upvotes: 9

Siniša
Siniša

Reputation: 3158

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

Upvotes: 10

user2072050
user2072050

Reputation: 1

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 :-)

Upvotes: -6

Steve Lacey
Steve Lacey

Reputation: 823

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.

Upvotes: 10

Related Questions