我有一个具有以下属性的视频标签:
<video width="xx" height="xx" poster="image.jpg" preload="auto">
我需要显示海报图像,并希望视频预加载。
我没有显示浏览器的控件,而是使用自定义控件(CSS和Javascript)手动控制视频。当我单击该视频时,它应该开始播放。
在Firefox中,它可以按预期工作:我单击海报图像,然后开始播放视频。我单击视频,视频停止。
在当前的webkit浏览器(Safari 6.0.2,Chrome 23.0.1271.64)上,此方法不起作用:
单击海报图像后,视频立即变为不可见,这给我留下了一个空白(白色)框。我听到声音了,但可以看到视频。当我单击该框时,声音停止。
如果我将
preload="none"
或设置为离开发布者图像,则这将再次在webkit浏览器中起作用。有任何已知的解决方法吗?
最佳答案
我有一个类似的问题。现在在Safari中似乎还可以,但Chrome 27仍存在异常。这是我正在使用的解决方案(从对此问题的可接受答案中借出: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>
其中“picture.png”是您的海报图像,“video.mp4”和“video.webm”是您的视频。
这是一个工作的js fiddle :http://jsfiddle.net/2n5Yj/1/