6

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

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

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

4

2 回答 2

4

我有一个类似的问题。现在在 Safari 中似乎还可以，但 Chrome 27 仍然表现不佳。这是我正在使用的解决方案（借用这个问题的公认答案：Video element removed 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/

于 2013-06-20T14:16:01.023 回答
2

我遇到了同样的问题，但是在使用 videojs 时有一个更简单的解决方法——

http://www.videojs.com/

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

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

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

于 2014-08-07T17:55:52.550 回答