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

Le meilleur correctif que j'ai pu obtenir a été d'ajouter ce code juste après le fichier </video>

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

... pas très joli mais ça marche.

UPDATE Récemment, de nombreux navigateurs ne peuvent lire automatiquement les vidéos que si le son est désactivé. muted à la balise vidéo aussi

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

Answer 2

Après avoir utilisé jQuery play() ou une maniupulation DOM comme suggéré par les autres réponses, cela ne fonctionnait pas encore (la vidéo ne s'affichait pas automatiquement) dans le Chrome pour Android (Version 56.0).

D'après ceci poste en développeurs.google.com Depuis Chrome 53, l'option de lecture automatique est respectée par le navigateur, si la vidéo est en sourdine .

Donc, en utilisant autoplay muted dans la balise vidéo permet la lecture automatique de la vidéo dans les navigateurs Chrome à partir de la version 53.

Extrait du lien ci-dessus :

La lecture automatique en sourdine des vidéos est prise en charge par Chrome pour Android à partir de la version 53. La lecture d'un élément vidéo démarre automatiquement dès qu'il est visible si les deux conditions suivantes sont remplies autoplay y muted sont fixés [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• La lecture automatique en sourdine est prise en charge par Safari sur iOS 10 et les versions ultérieures.
• La lecture automatique, en sourdine ou non, est déjà prise en charge sur Android par Firefox et UC Browser : ils ne bloquent aucun type de lecture automatique.

Answer 3

Google vient de changer sa politique pour les vidéos en autoplay, il doit être muted

Vous pouvez vérifier aquí

alors il suffit d'ajouter la sourdine

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

Answer 4

Il se trouve que Safari et Chrome sur le bureau n'aiment pas la manipulation DOM autour de la balise vidéo. Ils ne déclenchent pas l'ordre de lecture lorsque l'attribut autoplay est activé. même si l'événement canplaythrough a été déclenché lorsque le DOM autour de la balise vidéo a été modifié après le chargement initial de la page. En fait, j'ai eu le même problème jusqu'à ce que je supprime un jQuery .wrap() autour de la balise vidéo et après cela, la lecture automatique s'est déroulée comme prévu.

Answer 5

Pour moi, le problème était que le muted doit être ajouté dans l'élément video étiquette. C'est-à-dire :

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`