1页上的多个HTML5视频标签

debugcn 发表于 Dev

扎克·罗斯·克莱恩（Zach Ross-Clyne）

我有一个网页，页面顶部是一个全屏div，带有视频背景。我还需要在页面的另一端再放一个视频（出于测试目的，请观看同一视频）。

我有一个有趣的情况要弄清楚...

视频1（位于页面顶部）可以在Firefox，Safari，Chrome，IE上完美运行
视频2（页面下半部分）在Firefox，Safari和IE上效果很好。不镀铬

由于工作性质，我必须确保开发的网站是浏览器安全的。有谁知道为什么其中一个视频可以在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>

用户名

我猜（因为这里没有太多信息），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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。