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

• Veuillez utiliser muted mot-clé avant autoplay mot, Voici quelques changements de confidentialité en avril 2018.
• Vous pouvez lire la politique aquí

Answer 2

J'ai eu un problème lors de la lecture d'une vidéo dans Safari sur les iPhones. En ajoutant le playsinline dans le video tag peut résoudre ce problème, et ça marche !

<video autoplay muted loop playsinline class="someClass">
  <source src="source.mp4" type="video/mp4">
</video>

Vous obtiendrez également ce problème avec Safari sur OSX, au cas où vous seriez confus à propos de cette propriété. playsinline , aquí est l'explication.

Navigateurs mobiles, playsinline va lire la vidéo là où elle se trouve au lieu de la valeur par défaut, qui consiste à l'ouvrir en plein écran pendant la lecture.

Pour le Safari sur OSX, comme sites web par défaut Auto-Play L'option est Stop Media with Sound Cette stratégie peut également poser le problème des autorisations.

C'est pourquoi nous avons besoin de la propriété muted .

Answer 3

Essayez ça :

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

C'est ainsi que je procède normalement. loop, controls et autoplay ne nécessitent pas de valeur, ce sont des attributs booléens.

Answer 4

J'ai réussi à mettre le mien en lecture automatique en le mettant en sourdine. Je pense que les règles de Google ne laissent pas le chrome en lecture automatique à moins qu'il ne soit en mode muet.

<video id="video" controls autoplay muted
        border:0px solid black;"
        width="300"
        height="300">
    <source src="~/Videos/Lumen5_CTAS_Home2.mp4"
            type="video/mp4" />
    Your browser does not support the video tag.
    Please download the mp4 plugin to see the CTAS Intro.
</video>

Answer 5

Pour angular, vous devrez le mettre en sourdine et le jouer dans la section ngAfterViewInit() comme les suivantes

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

 @ViewChild('videoRef', { static: true }) videoRef!: ElementRef

ngAfterViewInit(): void {
  const media = this.videoRef.nativeElement
  media.muted = true 
  media.play() 
 }