Видео Mp4 в видеотеке html5, не играющем в мобильном хром и мобильном сафари

У меня есть этот код для воспроизведения видео на странице html5:

  <video autoplay loop id="bgvid">
    <source src="video-background.mp4" poster="/poster.png" type="video/mp4">
  </video>

Проблема заключается в том, что он не работает в мобильном хром (Android Phone) и в мобильном сафари (iPhone). Но он работает в "каждом" браузере (протестирован с Safari, Chrome, Firefox) на рабочем столе, а также на мобильном firefox (Android Phone).

Как я могу преодолеть эту проблему?

Edit: Добавил этот код:

  var myVideo = document.getElementById("bgvid");

  function playVid() {
      myVideo.play();
  }

  function pauseVid() {
      myVideo.pause();
  }

Если я добавлю кнопку, запускающую функцию playVid(), она работает. Поэтому я думаю, что проблема заключается в автовоспроизведении. Я попытался вызвать функцию с событием загрузки, но он не работает.

Ответы

Ответ 1

Очень просто нет поддержки автозапуска на мобильном сафари. Пожалуйста, проверьте все браузеры Android.

Я использую один трюк (или показываю всплывающее окно для использования события):

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
      document.body.addEventListener('touchstart', function(e){
    
    if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for android 
          // and maybe 3 max for iOS using single click or touch.
          // Every next click also can prepare more audios/videos.

        ONLYONETIME_EXECUTE = 0;
    }

  }, false)
 
}, false)


// It is very usually that user touch screen  ...

Обзор:

Я не понимаю, ios html5 политический. Они перестают поддерживать консольный регистратор javascript (квест сейчас: начиная с версии 5.1 ios). Автоматическое воспроизведение отключено, webrtc... Они хотят устройство, которое работает идеально. Автовоспроизведение может быть опасным при загрузке. В ближайшее время я ожидаю активации полной поддержки HTML5 на всех мобильных устройствах.

Новое обновление :  Я нашел это как положительный ответ:

С момента выхода iOS 10 Apple разрешила отключение автозапуска видео: https://webkit.org/blog/6784/new-video-policies-for-ios/