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

Question

我在 html5 视频标签上有这种奇怪的行为。我有 4 个视频，我想同时播放。所以我创建了自己的 play/pause 控制栏，所以当点击播放按钮时，所有 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

看起来 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

Multiple Simultaneous Audio or Video Streams

Currently, all devices running iOS are limited to playback of a single audio or video stream at any time. Playing more than one video—side by side, partly overlapping, or completely overlaid—is not currently supported on iOS devices. Playing multiple simultaneous audio streams is also not supported. You can change the audio or video source dynamically, however. See Replacing a Media Source Sequentially for details.

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

I Noticed you are using Videojs library (your video has the class "video-> js"

请检查此 fiddle 我已准备好让您使用 Videojs

进行测试

我想这就是你需要的 ;)

如您所见，Safari 的问题一直在发生。在 chrome 或其他人中，它工作得很好。它似乎是由开始播放视频时的延迟产生的。开始播放音频时也会发生同样的情况。

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

编辑

I´ve found this js library https://github.com/videojs/video-js-swf I´ll try with it to solve!

希望对你有所帮助。

$(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 4

根据 Safari HTML 音频视频指南

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

媒体控制器让您可以对任意数量的音频 and/or 视频元素进行分组，以便它们可以通过一组通用控件进行管理，并且还可以使它们保持完美同步，即使是网络出现打嗝。

要创建媒体控制器，只需将 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();

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

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

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

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

希望对您有所帮助...

你可以找到这个文档here

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

Play html5 video tag simultaneously on Safari

javascript

html

html5-video

video.js