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 ceci :

<video height="256" contrôles muets de lecture automatique en boucle id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</vidéo>

La lecture automatique démarre après le chargement de la page dans FireFox, mais ne s'exécute pas automatiquement dans les navigateurs basés sur Webkit. Cela ne se produit que sur certaines pages aléatoires. Jusqu'à présent, je ne trouve pas la raison. Je soupçonne que l'éditeur CMS a créé des balises non fermées ou beaucoup de JS.

Answer 1

Après avoir utilisé jQuery play() ou la manipulation DOM comme suggéré par d'autres réponses, cela ne fonctionne toujours pas correctement dans Chrome pour Android (version 56.0) (la vidéo ne se lit pas automatiquement). p>

Basé sur ce post de developers.google. com, À partir de Chrome 53, le navigateur respectera l'option de lecture automatique si la vidéo est mise en sourdine.

Donc, l'utilisation de l'attribut autoplay muted dans la balise vidéo entraînera la lecture automatique de la vidéo dans Chrome version 53 et supérieure.

Extrait du lien ci-dessus :

Answer 2

La meilleure solution que je puisse trouver est d'ajouter ce code après

<script>
    document.getElementById('vid').play();
</script>

...pas joli, mais efficace d'une manière ou d'une autre.

Mise à jour Récemment, de nombreux navigateurs ne peuvent lire automatiquement les vidéos qu'avec le son désactivé, vous devez donc également ajouter l'attribut muted à la balise vidéo

<video autoplay muted>
...
</video>