wake-up-neo.com

HTML5-Videos werden in Chrome 67 nicht automatisch abgespielt (auch wenn sie stummgeschaltet sind) Angular

Ich weiß, dass mehrere Posts ähnliche Probleme haben, aber bei keinem der von mir untersuchten Themen ist das spezifische Problem, das ich habe, zutreffend.

Das Problem ist, ich habe ein HTML5-Video, das nicht automatisch abgespielt wird, obwohl es stummgeschaltet ist. Insbesondere funktioniert es nicht in Chrome. In Safari und Firefox funktioniert das einwandfrei.

Das Code-Snippet sieht folgendermaßen aus:

<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>

Das Code-Snippet stammt von dieser Website und ist mit Angular erstellt. Ich habe Attribute entfernt, die nur aus Angular im kopierten Snippet der Übersicht halber verwandt sind.

Ich habe verschiedene Kombinationen der vorgeschlagenen Stellen im Internet ausprobiert und die Dokumentation der neueren Versionen von Chrome, die sich auf die Autoplay-Funktion auswirken, sorgfältig gelesen. Ich bin jedoch ratlos und nichts scheint zu funktionieren.

Angenommen, die Richtlinienänderung sollte sich nur auf die automatische Wiedergabe von Videos mit Audio auswirken, scheint jedoch die automatische Wiedergabe für dieses stummgeschaltete Video zu blockieren.

Ein merkwürdiges Verhalten, das mir aufgefallen ist, ist, dass das Video manchmal abgespielt wird, wenn ich das Chrome-Inspector-Tool öffne und es wieder schließe. Aber nicht immer.

Ich habe auch versucht, die play() direkt über JavaScript auszulösen. Dies funktioniert jedoch nicht, da der Benutzer sie nicht durch einen Klick initiiert hat.

Könnte dies ein Fehler bei Chrome sein oder liegt es an meinem Ende? Jede Hilfe wird geschätzt!


EDIT: Funktioniert immer noch nicht. Ich habe folgendes versucht, ohne Ergebnis:

  • Verwenden Sie stattdessen das http://techslides.com/demos/sample-videos/small.mp4-Video als Quelle.
  • autoplay-Attribut hinzufügen.
  • Ersetzen des gesamten <video>-Elements durch das vorgeschlagene jsfiddle .

Wenn ich controls aktiviere, wird der Audio-Button als ausgegraute "Sound on" -Version angezeigt. Dies liegt möglicherweise daran, dass mein Video keine Audiospur hat. Wenn Sie jedoch das Demo-Video verwenden, wird trotz aktiviertem muted-Attribut immer noch die Audio-Schaltfläche mit "Ton eingeschaltet" angezeigt.


EDIT 2: Code für die Komponente Angular hinzugefügt, die das Videoelement enthält:

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;
  }

}

Typoskript:

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() {}
}
2
Daniel Haan

Dank bigless 'linking diesem SO post habe ich das Problem gelöst.

Meine Implementierung der Lösung aus dem Link sieht folgendermaßen aus:

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>`
    );
  }
}

HINWEIS: Ich musste die Klasse landing-page-video in die globale styles.css Datei verschieben, da angle das komponentenspezifische Präfix nicht anhängt (dh das Styling wird nicht angewendet, wenn es wird in die komponentenspezifische CSS-Datei gestellt)

3
Daniel Haan

Lösung für Angular 2+ von Fällen, in denen die automatische Wiedergabe stumm ist und nicht funktioniert.

  1. Die automatische Wiedergabe wird solange verhindert, bis der Benutzer eine Aktion auf dem Bildschirm ausführt. Die Autoplay-Richtlinien von Chrome werden im April 2018 geändert. [ https://developers.google.com/web/updates/2017/09/autoplay-policy-changes]
  2. Autoplay funktioniert, wenn das Attribut "Stummschaltung" ausgewählt ist.
  3. In diesem Fall, in dem wir das Attribut "stumm" verwenden möchten und es nicht funktioniert, liegt das Problem bei Angular.

Dasselbe passierte mir und nach stundenlangem Suchen. Und ich habe folgendes gefunden: - [ https://stackoverflow.com/a/50686550/10435550 ][2]

onloadedmetadata="this.muted = true"

Das ist der Schlüssel. Angular kann die Stummschaltung nicht korrekt übersetzen. Aus diesem Grund müssen Sie die "onloadedmetadata" verwenden.

Schlussfolgerung

Getestet und läuft mit Winkel 5.2 in Chrome 69 und IE 11.

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

Verwenden von Angular 6.
Ich wollte ein gedämpftes Autoplay. Keiner der Vorgänger hat für mich gearbeitet, dieser hat Folgendes getan:

oncanplay="this.play()"

Hoffe es hilft jemandem.

4
Oriol Grau

Ich musste sowohl onloadedmetadata als auch oncanplay verwenden, um den Winkel 6 einzustellen

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

dies hat bei mir in Chrome 67 (und Firefox 61) funktioniert.

<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>

live-Beispiel: jsfiddle

hoffe das hilft.

1
kifka

sie müssen das autoplay-Attribut im <video>-Tag verwenden.

<video autoplay></video>
1
Mahdi Aryayi

Ich habe das gleiche Problem mit Winkel 6 und Chrome 70, die neue Autoplay-Richtlinie hat sich in den letzten Monaten von Google geändert. Ich löse das Problem, indem ich eine neue Methode in ngAfterViewInit () hinzufüge.

<!-- 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

Anstelle des HTML-Attributs autoplay & muted. Müssen Sie die Angular-Attribute [autoplay]="true" & [muted]="true" verwenden.

0
Bert Coenen