Играть html5 Видео тег одновременно на Safari

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

в safari у него странная проблема, видео не воспроизводилось одновременно, 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 является только примером.

13
html5 html5-video javascript video.js

4 ответов

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

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

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

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

может быть,стек вы найдете свое решение. Кажется, что аудио решение состоит в том, чтобы создать 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();
        });
    }
});
1

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

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

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

чтобы создать медиа-контроллер, просто добавьте mediagroup атрибут для всех элементов, которые вы хотите синхронизировать вместе. Значение, которое вы выбрали для mediagroup зависит от вас-пока значение одинаково для каждого подчиненного элемента, контроллер мультимедиа будет создан неявно.

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

большинство из тех же функции, атрибуты и событий доступны аудио и видео элементы также доступны для СМИ контроллеры. Вместо вызова play() или pause() непосредственно на самом видео, вы называете их на медиа-контроллер.

управление мультимедиа с помощью JavaScript Синхронизация Нескольких Элементов Мультимедиа Вместе 2012-12-13 / Copyright © 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();

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

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

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

1

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

0