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

Question

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

在野生动物园,它有奇怪的问题,视频没有同时播放,当我点击播放时,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

\n

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

\n

\n\n

请检查我为您准备的这个小提琴，以便使用Videojs进行测试

\n\n

我想这就是你所需要的；）

\n\n

正如你所看到的，safari 的问题总是会发生。在 Chrome 或其他浏览器中，它 \xc2\xb4s 工作得很好。它似乎是由于开始播放视频时出现延迟而产生的。当音频开始播放时也会发生同样的情况。

\n\n

也许在那个堆栈中你\xc2\xb4会找到你的解决方案。看来音频解决方案是生成一个 swf (FLASH) 对象并用它播放视频（don\xc2\xb4t 不知道这一点，但我\xc2\xb4ll 尝试通过示例准备对答案的另一个编辑）

\n\n

编辑

\n\n

\n

我\xc2\xb4ve找到了这个js库 https://github.com/videojs/video-js-swf我\xc2\xb4ll尝试用它来解决！

\n

\n\n

希望对您有帮助。

\n\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n