La lecture automatique des vidéos ne fonctionne pas dans les navigateurs de bureau Safari et Chrome.

Question

J'ai passé beaucoup de temps à essayer de comprendre pourquoi la vidéo était intégrée comme ici :

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

démarre automatiquement une fois que la page est chargée dans FireFox mais ne peut pas faire de lecture automatique dans les navigateurs basés sur Webkit. Cela ne s'est produit que sur certaines pages aléatoires. Jusqu'à présent, je n'ai pas réussi à en trouver la cause. Je soupçonne des balises non fermées ou des JS étendus créés par des éditeurs de CMS.

Answer 1

L'ajout du code ci-dessous au bas de la page a fonctionné pour moi. Je ne sais pas pourquoi cela fonctionne :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Answer 2

Sur l'iPhone de Safari lorsque la batterie est faible et que l'iPhone est allumé Mode faible consommation il n'y aura pas de lecture automatique, même si vous avez les attributs suivants : autoplay, loop, muted, playsinline sur la balise html de votre vidéo.

J'ai trouvé que travailler c'est avoir geste de l'utilisateur pour déclencher la lecture de la vidéo :

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

Vous pouvez en savoir plus sur les gestes de l'utilisateur et les politiques vidéo pour iOS sur le site webkit :

https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 3

Nous avons récemment abordé un problème similaire avec une vidéo intégrée et nous avons constaté que les attributs autoplay et muted n'étaient pas suffisants pour notre mise en œuvre.

Nous avons ajouté un troisième attribut "playsinline" au code et cela a corrigé le problème pour les utilisateurs iOS.

Cette correction est spécifique aux vidéos qui doivent être lues en ligne. À partir de https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Sur l'iPhone, les éléments seront désormais autorisés à être lus en ligne, et ne passeront pas automatiquement en mode plein écran lorsque la lecture commencera. Les éléments sans attributs playsinline continueront à nécessiter le mode plein écran pour la lecture sur iPhone. En quittant le mode plein écran par un geste de pincement, les éléments sans attributs playsinline continueront à être lus en ligne.

Answer 4

Google a mis à jour les règles de lecture automatique. La lecture automatique ne fonctionne qu'en mode muet. Consultez le lien https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 5

Essayez de remplacer autoPlay para autoplay .

Il semble qu'il soit parfois sensible à la casse. C'est très bizarre car cela fonctionnait comme autoplay pour moi, mais seulement si j'incluais controls