Mp4 видео в html5 тег видео не играет в мобильном хромом и мобильном сафари

Question

У меня есть этот код, чтобы играть видео на странице html5:

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

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

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

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

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

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

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

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

Answer 1

Очень просто нет поддержки autoPlay на мобильном сафари. Проверьте все браузеры для 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 this trick. 

     ONLYONETIME_EXECUTE = 0; 
     } 

    }, false) 
  
}, false) 


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

Обзор:

Я не понимаю, Ios html5-политическая. Они перестают поддерживать javascript console logger (i quest now: from ver 5.1 ios). Игра отключена, webrtc ... Они хотят, чтобы устройство отлично работало. Автопоиск может быть опасным при загрузке. В ближайшем будущем я ожидаю активации полной поддержки html5 на всех мобильных устройствах.

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

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