Автовоспроизведение видео HTML5 в мобильном браузере

Я использую следующий код HTML5 и JQuery для воспроизведения списка воспроизведения видео, URL-адреса которого находятся в массиве URLArray [].

function NextFrag(){

 if (index < URLArray.length)
 {
   $("#VideoContainer").html('<video  id="video1" controls autoplay width="95%"> "<source src= "'+ URLArray[index]+ '" type="video/mp4"></source> </video>' );
   index++;
   $("#video1").bind( "ended", NextFrag);
 }
}

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

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

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

Пожалуйста, помогите.

Ответы

Ответ 2

ОБНОВЛЕНИЕ - январь 2017 года:. Поскольку этот ответ все еще вызывает у меня репутацию, я настоятельно рекомендую, чтобы кто-нибудь читал это, чтобы проверить ответ от Рихардов и придать ему некоторую любовь. Ссылки Рихардов более современны, чем этот ответ, и должны помочь, если вам нужна автоматическая игра в браузере.

Ограничение автовоспроизведения в мобильных браузерах - это намеренное ограничение, введенное разработчиками ОС. Насколько я знаю, нет абсолютно никакого способа автоматического воспроизведения контента в мобильном браузере, потому что событие, которое требуется для запуска воспроизведения контента, представляет собой событие OS/Phone, которое сам браузер не контролирует и не взаимодействует.

Facebook реализовал функцию автоматического воспроизведения видео в своем рекламном арсенале, но это только через свое родное приложение. Даже могучий ФБ должен отдать свою волю силам богов телефона.

Я нашел одну статью об этом новом методе презентации объявлений FB, в котором некоторые пользователи в разделе комментариев жаловались на способ отключения автозапуска в браузерах, как вы можете, с помощью собственного приложения FB:

Facebook, чтобы добавить автовоспроизведение видео в NewsFeed для всех мобильных пользователей

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

Мой вывод: Если вам абсолютно нужна автоматическая игра, вам придется идти "родной" (га... посмотрите, что я там сделал?).

Ответ 3

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

Итак, мой полный пример:

<video width="100%" height="auto" autoplay muted loop playsinline id="my_video">
  <source data-src="/video.mp4" type="video/mp4">
</video>

Ответ 4

У меня возникали проблемы при автозапуске видео на iOS 11. Android и iOS 10.3 отлично работали с решением, равным тому, которое было предоставлено Pointi и Rihards.

Мобильное Safari на iOS 11, похоже, немного больше дивы. Обязательно добавьте атрибут prefixed (webkit-playinginline).

<video playsinline webkit-playsinline autoplay muted loop>
  <source src="./video.mp4" type="video/mp4">
</video>

Это решение работает во всех популярных настольных браузерах, а также в Android Chrome и iOS 10/11 Safari/Chrome. Он работает даже в большинстве встроенных браузеров, например, в Facebook-приложении (тестируется на iOS 11).

Поиск этого стоил мне часов, поэтому я надеюсь, что смогу помочь вам хотя бы для вас.

Ответ 5

В Mobile Chrome у меня включен параметр "Сохранение данных", который по умолчанию отключает отключенные видео с автозапуском, для которых GIF является частичным низкокачественным + высокочастотным решением.