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

我在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();
}

video_1=document.getElementById（'example_video_1'）；
if（video\u 1.readyState==4&&video\u 2.readyState==4&&video\u 3.readyState==4&&video\u 4.readyState==4）{
视频_1.播放（）；
视频_2.播放（）；
视频_3.播放（）；
}

---

还有3个这样的视频标签，其中1个是唯一的例子。

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

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

多个同步音频或视频流

---

目前，所有运行iOS的设备仅限于播放单个 音频或视频流在任何时间。并排播放多个视频 侧面、部分重叠或完全重叠当前不存在 iOS设备上支持。同时播放多个音频流 也不支持。您可以更改音频或视频源 然而，动态的。看见 详情请参阅

---

尝试监视所有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();
        });
    }
});

我注意到您正在使用Videojs库（您的视频具有“video->js”类）

请检查一下我为你准备的小提琴，用它来测试

我想这就是你需要的；）

正如你所看到的，safari的问题经常发生。在chrome或其他浏览器中，它工作得非常完美。它似乎是由于开始播放视频时的延迟而产生的。开始播放音频时也会发生同样的情况

也许你会从中找到解决办法。音频解决方案似乎是生成一个swf（FLASH）对象并用它播放视频（我不知道，但我会尝试用一个例子对答案进行另一次编辑）

编辑

我找到了这个js库，我将尝试用它来解决

希望对你有帮助

$（窗口）.ready（函数（）{
警报（“首次加载视频并等待”）；
var vid=document.getElementById（“示例视频1”）；
vid.oncanplay=函数（）{
开始播放（1）；
};
var vid2=document.getElementById（“示例视频2”）；
vid2.oncanplay=函数（）{
开始播放（1）；
};
var vid3=document.getElementById（“示例视频3”）；
vid3.oncanplay=函数（）{
开始播放（1）；
};
var vid4=document.getElementById（“示例视频4”）；
vid4.oncanplay=函数（）{
开始播放（1）；
};
});
var=0；
函数startplay（num）{
//警报（num）；
加载+=1；
如果（加载==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（）；
}
}

---

根据Safari HTML音频视频指南

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

媒体控制器允许您对任意数量的音频和/或视频元素进行分组，以便它们可以由一组通用控件进行管理，并且即使出现网络故障，它们也可以保持完全同步

要创建媒体控制器，只需将

mediagroup

属性添加到所有要同步的元素中即可 在一起您选择分配给

mediagroup

的值由您决定，只要每个从属元素的值相同，就会隐式创建一个媒体控制器

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

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

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

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

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

我希望这有助于

---

您可以找到此文档

，可能是因为不同的视频有不同的预加载时间。在播放视频之前，我已经使用了readyState功能。但仍然不起作用。我将编辑我的问题您的视频元素设置代码如何？再次编辑我的问题，请查看，谢谢：）所有视频是否同时延迟？例如：Video 1 Video 2（2sec）、Video 2 Video 3（2sec）等“目前，所有运行iOS的设备都被限制在任何时候播放单个音频或视频流。iOS设备目前不支持并排、部分重叠或完全重叠播放多个视频”我想你说的是移动safari，我的问题是关于mac os Safari的，我做了一些搜索，找到了这个答案：stackoverflow.com/a/41838950/3617531我投了赞成票。我想你需要的补丁最近已经做好了；）不工作，一些视频仍然延迟。这真的很奇怪，嗯，是的，这真的很奇怪。如果（！window.MediaController）返回，也许您可以添加

是@kaido。但问题是我们可以在safari中使用mediagroup属性来解决这个问题以避免其他b中的类型错误
var myVideos = document.querySelectorAll('video');
var mediaController = new MediaController();
myVideos[0].controller = mediaController;
myVideos[1].controller = mediaController;
mediaController.play();