web-dev-qa-db-fra.com

La vidéo MP4 dans le tag vidéo html5 ne joue pas sur mobile chrome et safari mobile

J'ai ce code pour lire une vidéo dans une page html5:

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

Le problème est qu'il ne fonctionne pas sur mobile chrome (téléphone Android) et sur Safari mobile (iPhone). Mais il fonctionne dans "tous" les navigateurs (testé avec Safari, Chrome, Firefox) sur le bureau et aussi sur Firefox mobile (téléphone Android).

Comment puis-je surmonter ce problème?

Edit: Ajout de ce code:

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

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

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

Si j'ajoute un bouton qui déclenche la fonction playVid () ça marche. Je pense donc que le problème est lié à la lecture automatique. J'ai essayé de déclencher la fonction avec l'événement de chargement mais cela ne fonctionne pas.

androidhtmlmobile-safarimp4mobile-chrome
11
Mario

Très simplement, il n'y a pas de support pour la lecture automatique sur Safari mobile. Veuillez tester tous les navigateurs Android.

J'utilise une astuce (ou affiche une fenêtre contextuelle pour utiliser l'événement):

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  ...

La revue :

Je ne comprends pas la politique ios html5. Ils cessent de prendre en charge l'enregistreur de console javascript (je recherche maintenant: depuis la version 5.1 ios). Lecture automatique désactivée, webrtc ... Ils veulent un appareil qui fonctionne parfaitement. La lecture automatique peut être dangereuse en charge. Dans un avenir proche, je m'attends à une activation complète du support html5 sur tous les appareils mobiles.

Nouvelle mise à jour: j'ai trouvé cela comme une réponse positive:

Depuis la sortie d'iOS 10 Apple a autorisé la lecture automatique des vidéos en sourdine: https://webkit.org/blog/6784/new-video-policies-for-ios/ =

5
Nikola Lukic