web-dev-qa-db-fra.com

La vidéo HTML5 ne s'exécute pas automatiquement (même en mode muet) dans Chrome 67 à l'aide de Angular

Je sais que plusieurs articles ont des problèmes similaires, mais aucun de ceux que j'ai consultés n'a le problème spécifique que je rencontre.

Le problème est que j'ai une vidéo HTML5 qui ne lit pas automatiquement, même si elle est en sourdine. Plus précisément, cela ne fonctionne pas dans Chrome. Cela fonctionne parfaitement dans Safari et Firefox.

L'extrait de code a l'apparence suivante:

<video class="landing-page-video" poster="assets/images/video-poster.jpg" loop muted playsinline preload="metadata" disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

L'extrait de code provient de ce site web et il est construit avec Angular. J'ai supprimé les attributs liés uniquement à Angular dans l'extrait de code copié pour plus de clarté.

J'ai essayé différentes combinaisons de sites suggérés en ligne, ainsi que la lecture attentive de la documentation des nouvelles versions de Chrome qui affectent la fonctionnalité de lecture automatique. Cependant, je suis désemparé, rien ne semble fonctionner.

Soi-disant, le changement de politique ne devrait affecter que la lecture automatique des vidéos avec audio, mais il semble toujours bloquer la lecture automatique de cette vidéo en sourdine.

Un comportement étrange que j'ai remarqué est que, parfois, la vidéo commence à être lue si j'ouvre l'outil d'inspection de chrome et le ferme à nouveau. Pas toujours, cependant.

J'ai également essayé de déclencher la play() directement via JavaScript, mais cela ne fonctionnera évidemment pas car l'utilisateur ne l'a pas initialisée en un clic.

Cela pourrait-il être un bug avec Chrome ou est-ce de mon côté? Toute aide est appréciée!

EDIT: ne fonctionne toujours pas. J'ai essayé ce qui suit, sans résultat:

  • Utiliser plutôt la vidéo http://techslides.com/demos/sample-videos/small.mp4 comme source.
  • Ajout de l'attribut autoplay.
  • Remplacement de l'élément <video> entier par celui de l'élément suggéré jsfiddle .

Lorsque j'active la variable controls, le bouton audio affiche la version "son activée" grisée, ce qui peut être dû au fait que ma vidéo n'a pas de piste audio. Cependant, lors de l'utilisation de la vidéo de démonstration, le bouton audio avec "son activé" est toujours affiché, malgré l'attribut muted.

EDIT 2: Code ajouté pour le composant Angular contenant l'élément video:

HTML:

<video class="landing-page-video noselect"  poster="assets/images/video-poster.jpg" *showItSizes="{min:900}" muted loop autoplay disableRemotePlayback>
    <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
    Your browser does not support video.
</video>

<div class="landing-page-video-overlay noselect" *showItSizes="{min:900}" [ngStyle]="{'height': videoHeight + 'px'}">
    <st-svg-logo class="video-overlay-logo"></st-svg-logo>
</div>
<div class="noselect" *showItSizes="{max:899}" style="position: relative; top: 0; height: 100vh;">
    <img src="assets/images/landing_pic_mobile_3.jpg" alt="Student Talks in Space" class="landing-page-video"
         style="height: 100vh;">
    <img class="video-overlay-logo" src="assets/images/student-talks-header.png"/>
    <img src="assets/images/landing_pic_mobile_bottom.png" class="bottom-transition-glitch" alt="">
</div>


<div class="st-container">
    <st-events-list class="full-width event-list" *showItSizes="{max:899}"></st-events-list>
    <h1>HOW IT WORKS</h1>
    <st-what-is class="st-row"></st-what-is>
    <st-world-map class="full-width" *showItSizes="{min:899}"></st-world-map>
    <st-counters #counters class="full-width" stInView (cameInView)="counters.countUp()"></st-counters>
    <st-events-list class="full-width" *showItSizes="{min:900}"></st-events-list>
    <br><br>
    <st-video class="st-row"></st-video>
    <br><br>
    <st-partners></st-partners>
    <br><br>
</div>

CSS:

.landing-page-video, .landing-page-video-overlay {
  position: relative;
  width: 100vw;
  max-width:100%;
  top: 0;
  z-index: -100;
}

.landing-page-video-overlay {
  height: 56.25vw;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

@media screen and (max-width: 899px) {
  .video-overlay-logo {
    position: absolute;
    top: 50vh;
    right: 21%;
    width: 100vw;
    animation: fade-in 1s;
    z-index: 160;
  }

}

Manuscrit:

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'st-home',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}
javascripthtmlgoogle-chromecross-browserhtml5-video
2
Daniel Haan

Merci à bigless 'link this SO post J'ai résolu le problème.

Ma mise en œuvre de la solution à partir du lien ressemble à ceci:

HTML

<div class="video-chrome-fix" [innerHTML]="videoTag"></div>

TypeScript 

import {Component} from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Component({
  selector: 'st-home',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent {

  videoTag;

  constructor(private sanitizer: DomSanitizer) {
    this.videoTag = this.getVideoTag();
  }

  private getVideoTag() {
    return this.sanitizer.bypassSecurityTrustHtml(
        `<video class="landing-page-video noselect" muted loop autoplay playsinline disableRemotePlayback>
            <source src="assets/images/landing-page-video-2.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>`
    );
  }
}

NOTE: je devais déplacer la classe landing-page-video dans le fichier global styles.css, car angular n’ajoute pas le préfixe spécifique au composant (c’est-à-dire qu’il ne sera pas appliqué au style si il est placé dans le fichier css spécifique au composant)

3
Daniel Haan

Solution à Angular 2+ des cas dans lesquels la reproduction automatique est requise, silencieuse et inopérante.

  1. La lecture automatique est empêchée jusqu'à ce que l'utilisateur exécute une action à l'écran. _ {Les règles de lecture automatique de Chrome changeront en avril 2018. [ https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]
  2. La lecture automatique fonctionne lorsque l’attribut "mute" est sélectionné.
  3. Pour ce cas, dans lequel nous voulons utiliser l'attribut "mute" et que cela ne fonctionne pas, le problème est angulaire.

La même chose m'est arrivé et après des heures de recherche. Et j’ai trouvé ce qui suit. - [ https://stackoverflow.com/a/50686550/10435550HER2]

onloadedmetadata="this.muted = true"

Ceci est la clé. Angular ne peut pas traduire l'attibute "mute" correctement. Pour cette raison, vous devez utiliser le "onloadedmetadata".

Conclusion

Testé et exécuté avec la version angulaire 5.2 sous Chrome 69 et IE 11.

<video onloadedmetadata="this.muted=true" autoplay>
    <source src="myVideo.mp4" type="video/mp4" />
</video>
4
Spaik Saucus

Utilisation de Angular 6.
Je voulais une lecture automatique en sourdine. Aucune des précédentes ne fonctionnait pour moi, celle-ci ne:

oncanplay="this.play()"

J'espère que ça aide quelqu'un.

4
Oriol Grau

Je devais utiliser à la fois onloadedmetadata et oncanplay pour corriger en angulaire 6

<video loop muted autoplay oncanplay="this.play()" onloadedmetadata="this.muted = true">
    <source src="video.mp4" type="video/mp4">
</video>
2
tommybananas

c'est ce qui a fonctionné pour moi en chrome 67 (et firefox 61).

<video width="320" height="240" muted controls autoplay>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

exemple live: jsfiddle

j'espère que cela t'aides.

1
kifka

vous devez utiliser l'attribut autoplay dans la balise <video>.

<video autoplay></video>
1
Mahdi Aryayi

J'ai le même problème avec angular 6 et Chrome 70, la nouvelle politique de lecture automatique était en train de changer par Google au cours des derniers mois, je résous le problème en ajoutant une nouvelle méthode à ngAfterViewInit ().

<!-- home.component.html -->
<div class="fullscreen-bg">
  <video #homeVideo id="homeVideo" class="fullscreen-bg__video" muted loop autoplay disableRemotePlayback onloadedmetadata="this.muted=true" *ngIf="true">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogv" type="video/ogg">
  </video>
</div>

// home.component.ts
ngAfterViewInit(){
  let myVideo = document.getElementById('homeVideo') as HTMLFormElement;
  myVideo.muted = false;
  myVideo.loop = true;

  if (myVideo){
    setTimeout(() => {
      console.log("Play ?", myVideo.play() );
      myVideo.play();
    }, 3000);
  }
}
0
MrPhillip Cuevas

Au lieu d'utiliser l'attribut HTML autoplay & muted. , Vous devez utiliser les attributs Angular [autoplay]="true" & [muted]="true"

0
Bert Coenen