Question

我在html5视频标签上有这种奇怪的行为。我有4个视频，我想同时播放。所以我创建了自己的控制栏来播放/暂停，所以当点击播放按钮时，播放所有4个视频，与暂停按钮相同。

在safari上，它有奇怪的问题，视频没有同时播放，当我点击播放时有1或2个视频有延迟，所以并非所有视频都在播放。

在Chrome和Firefox上，它的工作正常，safari有什么问题？

我正在使用javascript .play()功能播放所有视频。

我还确保在播放视频之前加载视频。像，

<video id="example_video_1" class="video-js vjs-default-skin" preload="auto">
    <source src="asset/video/al_vertrag_kranken_v1_part1.ogv" type='video/ogg' />
    <source src="asset/video/al_vertrag_kranken_v1_part1.mp4" type='video/mp4' />
    <source src="asset/video/al_vertrag_kranken_v1_part1.webm" type='video/webm' />
</video>

video_1 = document.getElementById('example_video_1');

if (video_1.readyState == 4 && video_2.readyState == 4 && video_3.readyState == 4 && video_4.readyState == 4) {
    video_1.play();
    video_2.play();
    video_3.play();
}

还有3个这样的视频标签，1只是示例。

Answer 1

我注意到您正在使用Videojs库（您的视频包含“video-＆gt; js”类

请检查我准备好的这个小提琴，用Videojs

进行测试

我认为你需要的;）

正如您所看到的，safari的问题总是在发生。在铬或其他方面它完美地工作。它似乎是由开始播放视频时的延迟产生的。音频播放开始时也是如此。

也许在that stack你会找到你的解决方案。似乎音频解决方案是生成一个swf（FLASH）对象并用它播放视频（不知道它但我会尝试用一个例子准备另一个编辑答案）

修改

我发现这个js库https://github.com/videojs/video-js-swf我会尝试用它来解决！

希望对你有所帮助。

$(window).ready(function() { alert("FIRST LOADING VIDEOS AND WAITING"); var vid = document.getElementById("example_video_1"); vid.oncanplay = function() { startplay(1); }; var vid2 = document.getElementById("example_video_2"); vid2.oncanplay = function() { startplay(1); }; var vid3 = document.getElementById("example_video_3"); vid3.oncanplay = function() { startplay(1); }; var vid4 = document.getElementById("example_video_4"); vid4.oncanplay = function() { startplay(1); }; }); var loaded = 0; function startplay(num) { // alert(num); loaded += 1; if (loaded == 4) { document.getElementById("example_video_1").play(); document.getElementById("example_video_2").play(); document.getElementById("example_video_3").play(); document.getElementById("example_video_4").play(); } }

<script src="http://vjs.zencdn.net/4.12/video.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video id="example_video_1" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> </video> <video id="example_video_2" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> </video> <video id="example_video_3" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> </video> <video id="example_video_4" class="video-js vjs-default-skin" preload="auto" width="640" height="264"> <source src="http://www.w3schools.com/html/mov_bbb.mp4" type='video/mp4' /> </video>

Answer 2

尝试监控所有4个元素的canplay事件。像

这样的东西

// Event trigger counter
var i = 0;
$('video').on('canplay', function(){
    i += 1;
    // Start playback when everything is ready
    if (i === 4) {
        $('video').each(function(){
            this.play();
        });
    }
});

Answer 3

根据Safari HTML音频视频指南

将多个媒体元素同步在媒体控制器出现之前，确保两个或多个视频在同一时间播放是一项具有挑战性的工作。

媒体控制器允许您对任意数量的音频和/或视频元素进行分组，以便它们可以通过一组通用控件进行管理，并且即使发生网络打嗝，也可以保持完美同步。 / p>

要创建媒体控制器，只需将mediagroup属性添加到您要同步的所有元素即可一起。您选择分配给mediagroup的值取决于您 - 只要每个从属元素的值相同，就会隐式创建媒体控制器。

<video src="video.m4v" width="960" height="600"
mediagroup="masterController"></video>

音频和视频元素可用的大多数相同功能，属性和事件也可供媒体控制器使用。不是直接在视频本身上调用play()或pause()，而是在电话上调用它们媒体控制器。

var myVideo = document.querySelector('video');
var mediaController = myVideo.controller;
mediaController.play();

注意：媒体控制器不支持的两个属性是循环和自动播放。

访问任何从属媒体元素上的控制器对象将返回分组的控制器元素。您还可以完全使用JavaScript创建媒体控制器，而无需修改属性你的HTML：

var myVideos = document.querySelectorAll('video');
var mediaController = new MediaController();
myVideos[0].controller = mediaController;
myVideos[1].controller = mediaController;
mediaController.play();

如果一个视频停顿或断断续续，其他视频将自动暂停以等待滞后视频赶上。当视频缓冲并准备播放时，剩余的视频将恢复同步。

我希望这会有所帮助......

您可以找到此文档here

Answer 4

Safari似乎目前不支持同时播放多个视频......

来自Safari HTML5音频和视频指南：

https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW10

多个同步音频或视频流

目前，运行iOS的所有设备仅限于播放单个设备   音频或视频流随时可用。播放多个视频端   边，部分重叠或完全覆盖 - 目前不是   iOS设备支持。播放多个同步音频流   也不受支持。您可以更改音频或视频源   然而，动态地。见Replacing a Media Source Sequentially   详情。

在Safari上同时播放html5视频标签

4 个答案: