Question

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

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

视频1（位于页面顶部）可在Firefox，Safari，Chrome，IE上完美运行
视频2（页面的一半）在Firefox，Safari和IE上运行良好。 不是Chrome

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

AT TOP OF PAGE

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

HALF WAY DOWN PAGE

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

1页上有多个HTML5视频标签

1 个答案: