Hover a html5 player doesn't work in chrome

Question

I'm trying to get a html 5 video to play on mouseover. It works fine in firefox and safari just in chrome the video blanks out when i hover and becomes visible only after i hover on another element on the page....

This is the site: www.manart.de

This is the code:

    <div id="wrapper">
    <video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
    <source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
    <source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
    </video>    
    </div><!--end wrapper-->

    <script src="fileadmin/js.js"></script>

And this is the js:

    document.addEventListener('mouseover',hoverVideo,false);
    var vid = document.getElementById('video-example');
    function hoverVideo(e)
    {   
    if(e.target == vid)
    {
    vid.play();
    this.addEventListener('mouseout',hideVideo,false);
    }

    }

Thanks for helping!!!!

score 2 · Accepted Answer · edited May 23 '17 at 12:21

It's a bit odd that, but if you remove the poster frame (I also made sure that the hideVideo method was defined to avoid an exception being thrown) it works (fiddle).

I tried using a JPG instead of a PNG for the poster frame with the same results (fiddle). And when you substitute your video for one with sound, it's apparent that the video is playing, but that it's invisible (fiddle).

Looks like a bug in Chrome to me but Google didn't throw much up when I searched (maybe my terms were wrong).

The quick fix, therefore, is probably to simply remove the poster frame which, since Chrome will display the first frame of the video when it has loaded, is probably pretty close to what you're looking for anyway.

Update:

Alternatively, you could use the hack detailed in this thread on a similar issue which involves dynamically adding controls to the player before playback starts and removing them again immediately (fiddle). The author has confirmed the issue as a bug in Chrome by verifying that it does not occur in Chrome 19.

HTML:

<div id="wrapper">
    <video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
      <source id='mp4'
        src="http://www.manart.de/fileadmin/schiffchen.mp4"
        type='video/mp4'>
      <source id='ogv'
        src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
        type='video/ogg'>
    </video>    
</div>

JavaScript:

var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);

function hoverVideo(e) {   
    if (vid.getAttribute('controls') != 'true') {
        vid.setAttribute('controls', 'true');                    
    }
    vid.play();
    vid.removeAttribute('controls');
    vid.addEventListener('mouseout',hideVideo,false);
}

function hideVideo(e) {
    // do whatever you were going to do here, but omitting
    // the method completely causes an exception
    //vid.pause();   

    // clean up the listener when finished
    vid.removeEventListener('mouseout', hideVideo);
}

Hover a html5 player doesn't work in chrome

1 Answers1