我有一个具有以下属性的视频标签:

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

10-07 19:21
查看更多