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

【问题标题】：video disappears when poster attribute and preload is defined定义海报属性和预加载时视频消失
【发布时间】：2012-11-09 15:23:38
【问题描述】：

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

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

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

【问题讨论】：

标签： html video webkit preload poster

【解决方案1】：

我遇到了类似的问题。现在在 Safari 中似乎还可以，但 Chrome 27 仍然表现不佳。这是我正在使用的解决方案（借用此问题的公认答案：Video element disappears in Chrome when not using controls）。

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

【讨论】：

【解决方案2】：

我也遇到过同样的问题，但在使用 videojs 时更容易解决 --

http://www.videojs.com/

它们为海报包含一个单独的 div -- 我只是添加了一些 css 来覆盖它们的默认值：

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

我意识到 videohtml 库的额外开销可能不是最佳解决方案。只是发布以防万一它被认为是值得的/所以那些已经使用它的人可以利用它。

【讨论】：