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?
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/