0

I'm working on an sandbox experiment using html5 video and am wondering how I can get the poster image to display after again once the end user hovers off the video?

I have the video setup so that if you hover over the video can auto play and if you hover off it stops. I would like it to return back to poster image.

Javascript

<script>

document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('vid1');

function hoverVideo(a)
{    
    if(a.target == vid)
    {
        vid.play();
        this.addEventListener('mouseout',hideVideo,false);
    }

}
function hideVideo(e)
{
    if(e.target == vid)
    {
        vid.pause();
    }

}

</script>

HTML5

<video id="vid1" width="1000" height="418" 
poster="poster.png" loop="true" preload="auto"
controls class="video-js vjs-default-skin">

 <source src="my_video.mp4" type='video/mp4' >
 <source src="my_video.webm" type='video/webm' />
 <source src="my_video.ogv" type='video/ogg' />

</video>    

1 Answer 1

1

Try this (you'll need to include jQuery)

function hideVideo(e)
{
    if(e.target == vid)
    {
        vid.pause();
        var poster = $(vid).attr("poster");
        $(vid).attr("poster", "");
        $(vid).attr("poster", poster);
    }

}
1
  • Thanks! That sort of did it! I had to change $("#vid1").attra("poster", "imageurl");, but the thing is when I go to hover over the image a second time the video disappears.
    – Monstr92
    Jun 5, 2013 at 22:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.