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

4 回答

• 2

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

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

  我认为你需要的;）

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

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

  EDIT

  我发现这个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>
  

  回复于 2024-04-29T22:36:50+08:00
• 1

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

  回复于 2024-04-29T22:36:50+08:00
• 1

  As per Safari HTML Audio Video Guide

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

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

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

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

  音频和视频元素可用的大多数相同的 functions ， attributes 和 events 也可用于媒体控制器 . 您可以在媒体控制器上调用它们，而不是直接在视频本身上调用 play() 或 pause() .

  使用JavaScript控制媒体同步多个媒体元素2012-12-13 |版权所有©2012 Apple Inc.保留所有权利 .

  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

  回复于 2024-04-29T22:36:50+08:00
• 0

  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设备目前不支持多个视频并排播放，部分重叠或完全覆盖 . 还不支持播放多个同步音频流 . 但是，您可以动态更改音频或视频源 . 有关详细信息，请参阅按顺序更换媒体源 .

  回复于 2024-04-29T22:36:50+08:00