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

Chrome ne permet pas la lecture automatique des vidéos avec le son activé, assurez-vous donc d'ajouter muted de l'attribut video comme ceci

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Answer 2

var video = document.querySelector('video');
video.muted = true;
video.play()

Seule cette solution m'a aidé, <video autoplay muted ...>...</video> n'a pas fonctionné...

Answer 3

Je viens de rencontrer le même problème avec ma vidéo.

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Après des recherches, j'ai trouvé une solution :

Si je règle les attributs "preload" sur "true", la vidéo démarre normalement.

Answer 4

Il a fonctionné pour moi lorsqu'il a été combiné avec muted attribut

Answer 5

Essayez ça :

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>