Question

我有一个包含以下属性的视频标记：

 <video width="xx" height="xx" poster="image.jpg" preload="auto">

我需要展示海报图片，我希望视频能够预先加载我没有显示浏览器的控件，而是使用自定义控件（CSS＆amp; 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库增加的开销可能不是最佳解决方案。只是发布以防它被视为有价值/所以那些已经使用它的人可以利用它。

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

2 个答案: