1 页上有多个 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>