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

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浏览器中工作。

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

Answer 1

我有一个类似的问题。现在在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小提琴：http://jsfiddle.net/2n5Yj/1/

Answer 2

我也有同样的问题，但是使用videojs时更容易解决-

http://www.videojs.com/

它们包括一个单独的div海报-我刚刚添加了一些CSS以覆盖其默认设置：

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

我意识到videohtml库的额外开销可能不是最佳解决方案。只是发布，以备不时之需/那些已经在使用它的人可以利用它。

Answer 3

我发布了有关此问题的答案。我将保留链接。希望对您有所帮助。

HTML5 Video poster attribute in Safari and Chrome