Как автоматически воспроизвести два HTML5 видео вместе после загрузки? - PullRequest
Новая
       22

Как автоматически воспроизвести два HTML5 видео вместе после загрузки?

2 голосов
/ 08 января 2020

Я пытаюсь одновременно запустить два HTML5 видео. Другими словами, могу ли я запретить воспроизведение этих видео до тех пор, пока они оба не загрузятся?

Я не хочу, чтобы одно из них начало воспроизводиться, а второе все еще загружается. Я надеюсь, что это имеет смысл.

1 Ответ

0 голосов
/ 09 января 2020

Вы можете использовать функцию «onloadeddata», чтобы проверить, как оба загрузили, а затем запустить оба одновременно. Я думаю, что вы находитесь в зависимости от браузера и реализации движка JavaScript, чтобы точно определить, насколько точной будет синхронизация, но при быстром тестировании она выглядит довольно синхронизированной, если вы не беспокоитесь о миллисекундной синхронизации.

См. Пример ниже. 

var vid1 = document.getElementById("MyVid1");
var vid2 = document.getElementById("MyVid2");

var vid1Ready = false
var vid2Ready = false

vid1.onloadeddata = function() {
    if (vid2Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid1Ready = true
    }
};

vid2.onloadeddata = function() {
    if (vid1Ready == true) {
      vid1.play()
      vid2.play()
    } else {
      vid2Ready = true
    }
};
<video id="MyVid1" width="320" height="176" controls preload="auto">
  <source src="http://ftp.nluug.nl/pub/graphics/blender/demo/movies/ToS/tears_of_steel_720p.mov" type="video/mp4">
  Your browser does not support this video format
</video>

<video id="MyVid2" width="320" height="176" controls preload="auto">
  <source src="http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4" type="video/mp4">
  Your browser does not support this video format
</video>
...