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

Aucune des autres réponses n'a fonctionné pour moi. La solution que j'ai trouvée consiste à déclencher un clic sur la vidéo elle-même ; c'est un peu compliqué (à cause du délai d'attente nécessaire) mais cela fonctionne bien :

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Answer 2

J'ai passé deux heures à essayer toutes les solutions mentionnées ci-dessus.

C'est ce qui a finalement fonctionné pour moi :

var vid = document.getElementById("myVideo");
vid.muted = true;

Answer 3

Angulaire 10 :

<video [muted]="true" [autoplay]="true" [loop]="true">
    <source src="/assets/video.mp4" type="video/mp4"/>
</video>

Answer 4

C'est parce que maintenant chrome empêche la lecture automatique dans la vidéo html5, donc par défaut ils ne permettront pas la lecture automatique. nous pouvons donc changer ces paramètres en utilisant les paramètres du drapeau de chrome. ce n'est pas possible pour le cas normal donc j'ai trouvé une autre solution. ceci fonctionne parfaitement... (ajouter preload="auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();

Answer 5

<video onload='this.play()' src='the source' autoplay controls></video>

Cela a marché pour moi.