video disappears when poster attribute and preload is defined

Question

I have a video-tag with the following attributes:

 <video width="xx" height="xx" poster="image.jpg" preload="auto">

I need the poster-image to show and I want the video to preload.
I don't show the browser's controls but control the video manually with custom controls (CSS & Javascript). The video is supposed to start when I click on it.

In Firefox this works as intended: I click on the poster-image and the video starts. I click on the video, the video stops.

On current webkit-browsers (Safari 6.0.2, Chrome 23.0.1271.64) however this does not work:
As soon as I click on the poster image the video becomes invisible, leaving me with a blank (white) box. I hear the sound but can see the video. When I click on that box, the sound stops.

If I set either preload="none" or leave the poster-image, this works in webkit-browsers again.

Is there any known workaround for this?

Solution 1

I had a similar issue. It seems to be okay in Safari now, but Chrome 27 is still misbehaving. This is a solution that I am using (borrowed from the accepted answer to this question: Video element disappears in Chrome when not using controls).

JS

$(document).ready(function(){
    $("#video").on('play',function(){
        if (this.getAttribute('controls') !== 'true') {
            this.setAttribute('controls', 'true');                    
        }
        this.removeAttribute('controls');
    });
});

HTML

<video id="video" preload="auto" loop="loop" autoplay="autoplay" poster="picture.png">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.webm" type="video/webm" />
    Your browser sucks.
</video>

Where "picture.png" is your poster image and "video.mp4" and "video.webm" are your videos.

Here is a working js fiddle: http://jsfiddle.net/2n5Yj/1/

Solution 2

I had this same issue, but had an easier fix while using videojs --

http://www.videojs.com/

They include a separate div for the poster -- I just added some css to overwrite their default:

.vjs-poster {
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 20;
}

I realize that the added overhead of a videohtml library may not be an optimal solution. Just posting in case it's seen as worthwhile / so those already using it can take advantage.