Воспроизведение видеотега html5 одновременно на Safari

У меня есть это странное поведение в теге html5 video. У меня есть 4 видео, которые я хочу играть одновременно. Поэтому я создаю собственную панель управления для воспроизведения/паузы, поэтому, когда нажата кнопка воспроизведения, воспроизводятся все 4 видео, так же как и кнопка паузы.

В сафари есть странная проблема: видео не воспроизводилось в одно и то же время, у 1 или 2 видео есть задержка, когда я нажимаю кнопку воспроизведения, поэтому не все видео воспроизводятся одновременно.

В Chrome и Firefox работает нормально, что плохого с сафари?

Я использую функцию 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 - это только пример.

Ответ 1

Я заметил, что вы используете библиотеку Videojs (у вашего видео есть класс "video- > js"

Пожалуйста, проверьте эту скрипку, которую я подготовил для вас, чтобы проверить это с помощью Videojs

Я думаю, что вам нужно;)

Как вы можете видеть, проблема с сафари всегда происходит. В хроме или других он работает отлично. Кажется, это вызвано задержкой при запуске воспроизведения видео. То же самое происходит при запуске воспроизведения звука.

возможно, в в стеке вы найдете свое решение. Похоже, что звуковое решение состоит в том, чтобы сгенерировать объект swf (FLASH) и воспроизвести с ним видео (не знаю об этом, но я попытаюсь подготовить другое редактирование ответа с примером)

ИЗМЕНИТЬ

Я нашел эту библиотеку 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>

Ответ 2

Попробуйте отслеживать событие canplay для всех 4 элементов. Что-то вроде

// 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();
        });
    }
});

Ответ 3

В соответствии с Safari HTML Audio Video Guide

Синхронизация нескольких мультимедийных элементов вместе До появления медиа-контроллеров, обеспечивающих одновременное выполнение двух или более видеороликов, было сложным делом.

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

Чтобы создать медиа-контроллер, просто добавьте атрибут 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();

Примечание. Два атрибута, которые поддерживаются медиа-контроллерами, являются loop и autoplay.

Доступ к объекту контроллера на любом из подчиненных элементов мультимедиа будет возвращать контроллер сгруппированных элементы. Вы также можете создать медиа-контроллер полностью на JavaScript без необходимости изменять атрибуты вашего HTML:

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

Если одно видео останавливается или заикается, другие видео автоматически приостанавливаются, чтобы ждать, пока отстающее видео не догонит. Когда видео буферы и готовы к воспроизведению, оставшиеся видео будут синхронизироваться.

Надеюсь, это поможет...

И вы можете найти этот документ здесь

Ответ 4

Похоже, что воспроизведение нескольких видео одновременно не поддерживается в 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. Воспроизведение нескольких одновременных аудиопотоков также не поддерживается. Вы можете изменить аудио или видео источник динамически. См. Замена источника мультимедиа последовательнодля деталей.