定义海报属性和预加载时视频消失

Question

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

 <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-browsers 中工作。

是否有任何已知的解决方法？

Answer 1

我有类似的问题。现在在 Safari 中似乎没问题，但 Chrome 27 仍然表现不佳。这是我正在使用的解决方案（借用了此问题的已接受答案：Video element attempts gone in Chrome when not usingcontrols）。

JS

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

超文本标记语言

<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 小提琴：http ://jsfiddle.net/2n5Yj/1/