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

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

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>