一页上有多个 HTML5 个视频标签

Question

我有一个网页，页面顶部是全屏 div，带有视频背景。我在页面下方还有另一个视频（出于测试目的，同一视频）。

我有一个有趣的场景需要弄清楚...

视频 1（位于页面顶部）在 Firefox、Safari、Chrome、IE
视频 2（页面下方）在 Firefox、Safari 和 IE 上运行良好。 不是Chrome

由于我的工作性质，我必须确保我开发的网站是浏览器安全的。有谁知道为什么 1 个视频可以在 Chrome 中工作，而另一个却不能？

在页面顶部

<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
    <source src='img/video.mp4' type="video/mp4"/>
</video>

下页一半

<video  id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
    <source src="img/video.mp4" type="video/mp4" />
</video>

我的页面底部也有这个 DOM Javascript

<script>
    document.getElementById('video').play();
    document.getElementById('s-video').play();
</script>

Answer 1

我猜想（因为这里没有太多信息）当执行 play() 时数据很快就准备好了。

您可以尝试更改以下内容：

我是标签本身，将 preload 更改为使用 auto
在 JavaScript 中，为 canplay 事件的元素添加侦听器

示例：

<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
    <source src='img/video.mp4' type="video/mp4"/>
</video>

<video  id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="auto" width="100%" height="100%" data-setup="{}">
    <source src="img/video.mp4" type="video/mp4" />
</video>

和

<script>
    var video1 = document.getElementById('video');
    var video2 = document.getElementById('s-video');

    video1.addEventListener("canplay", start);
    video2.addEventListener("canplay", start);

    function start() {this.play()};  // "this" = current element calling
</script>

更新

如果您想将 preload 设置为 none，这也可以工作：

<script>
    var video1 = document.getElementById('video');
    var video2 = document.getElementById('s-video');

    video1.addEventListener("canplay", start);
    video2.addEventListener("canplay", start);

    function start() {this.play()};  // "this" = current element calling

    video1.load();  // start loading video (metadata + data)
    video2.load();
</script>

一页上有多个 HTML5 个视频标签

Multiple HTML5 Video Tags on 1 page

html

html5-video