it-swarm.com.de

HTML5-Video stummgeschaltet, aber immer noch abgespielt

Titel sagt so ziemlich alles aus. Ich habe ein Video, das automatisch abgespielt wird, wenn es auf der Seite erscheint. 

Im HTML-Code habe ich stummgeschaltet = "stummgeschaltet". Und hier kommt der seltsame Teil. Wenn Sie die Bedienelemente betrachten, ist sie eindeutig stummgeschaltet, aber die Musik wird noch gespielt und ist zu hören. Selbst wenn ich mir das HTML5-Videobeispiel auf W3Schools anschaue, spielt es die Musik stumm. 

Gibt es eine Möglichkeit, dies durch jQuery zu umgehen? Ich habe eine jQuery-Zeile, die das Video stummgeschaltet hält, aber das hat keine Auswirkung. 

Hier wird der HTML-Code verwendet: 

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls" muted="muted">
            <source src="intouchables.f4v" type="video/mp4">
            Your browser does not support the video tag.
        </video>

Hoffe du kannst mir helfen. Die jQuery-Zeile lautet wie folgt: 

$ ("video"). prop ('stummgeschaltet', wahr); 

Danke im Voraus. 

18
Jan Haesen

Ich bin nicht ganz sicher, warum das muted-Attribut fehlerhaft arbeitet, wenn es im video-Tag definiert wird. Dies können Sie jedoch tun:

Entfernen Sie zunächst das muted="muted"-Attribut aus dem Video-Tag. Behalte es einfach als:

<video id="video" width="640px" height="350px" autoplay="autoplay" loop="loop" controls="controls">
    <source src="intouchables.f4v" type="video/mp4">
    Your browser does not support the video tag.
</video>

Definieren Sie nun eine Funktion, die das Video beim Laden der Seite stummschaltet.

window.onload = function () {
    var element = document.getElementById('video');
    element.muted = "muted";
}

Ich habe das überprüft und es funktioniert.

24
Vishnu

sieht aus wie dieser stumm geschaltet aufgehört hat, in Chrom 64 zu arbeiten.

4
reco
<video preload= "true" autoplay = "autoplay" loop = "loop" muted>
    <source src = "video/Real-Estate.mp4" type = "video/mp4">
</video>
4
Tahmid

In meiner Antwort gibt es keine wirklich neuen Antworten - ich versuche einfach, diese Frage auf den neuesten Stand zu bringen und zu hoffen, dass die Leute nicht den ganzen Tag damit verschwenden, wie ich es gerade getan habe.

Soweit ich das beurteilen kann (vor allem, da diese Frage so alt ist), hat mutednever funktioniert, wenn das Video dynamisch zur Seite hinzugefügt wird. Und da muted nicht funktioniert, wird muted autoplay auch nicht funktionieren. 

Ich denke, was passiert, ist, dass der Browser bestimmte Entscheidungen beim Laden der Seite trifft, und aus irgendeinem super ungeraden Grund wird ein Video, das später zur Seite hinzugefügt wird, NICHT stummgeschaltet, selbst wenn es die muted -Eigenschaft hat. Ich glaube, dass dies ein Fehler in Chrome ist, der für mich nicht in Safari auftritt - aber es sieht so aus, als ob wir uns erst einmal daran halten.

Googles Blogeintrag bei automatischer Wiedergabe/Stummschaltung ist erst ein Jahr alt und bietet folgende Erkenntnisse:

Die Autoplay-Richtlinien von Chrome sind einfach:

  • Eine stummgeschaltete Autoplay-Funktion ist immer zulässig. 
  • Autoplay mit Sound ist erlaubt, wenn:
    • Der Benutzer hat mit der Domäne interagiert (klicken, tippen usw.). 
    • Auf dem Desktop wurde der Schwellenwert für den Media Engagement Index des Benutzers überschritten. Dies bedeutet, dass der Benutzer zuvor ein Video mit .__ abgespielt hat. klingen. 
    • Auf dem Handy hat der Benutzer die Website zu seinem Startbildschirm hinzugefügt. 
  • Top-Frames können Autoplay-Berechtigungen an ihre Iframes delegieren, um Autoplay mit Sound zu ermöglichen.

Es fehlt nur noch eine wichtige Sache! 

  • Das "stummgeschaltete" HTML-Attribut wird nur wirksam, wenn das Video beim ersten Laden im HTML-Code vorhanden ist. Dies gilt auch für automatisch stummgeschaltete Videos.

Was ist also die Auswirkung davon:

  • Wenn ein Video ohne Ton programmgesteuert abgespielt wird, muss es zuerst stummgeschaltet werden. Wenn der Seite ein dynamisches Video hinzugefügt wird, müssen Sie video.muted = true explizit festlegen, nachdem es dem DOM hinzugefügt wurde (oder direkt vor dem Abspielen).
  • Wenn Sie versuchen, video.play() programmgesteuert auszuführen (z. B. wenn jemand an einem stummgeschalteten Video vorbeirollt und es abgespielt werden soll), muss das Video zuerst stummgeschaltet werden. 

Ich bin darauf gestoßen Angular und habe viel zu viel Zeit damit verbracht, unter der Annahme, dass es sich um die Tatsache handelt, dass ich eine Vorlage oder etwas Angular verwandte.

Ich habe eine Test-App für StackBlitz erstellt. Sie müssen die Zeile // video.muted = true auskommentieren, damit sie ordnungsgemäß funktioniert.

https://stackblitz.com/edit/angular-ze4t9y

Die anderen wichtigen Dinge zu realisieren sind:

  • Selbst wenn ein Video eigentlich keinen Ton hat, muss es stummgeschaltet sein. Testen Sie bei Bedarf das Video " bunny ".
  • Die neueren Regeln für das Medienengagement, die im Blog beschrieben werden, können Sie beim Testen einer Seite verwirren, da Sie mit der Seite interagiert haben. Sie müssen den Browser schließen oder ein neues Fenster im Inkognito-Modus öffnen, um diese Einstellungsregel zurückzusetzen (siehe Blogeintrag).

Der Fehler, den Sie im Browser sehen, wenn Sie versuchen, ein nicht stummgeschaltetes Video abzuspielen, wenn der Benutzer sich nicht zuerst mit der Seite beschäftigt hat, wird unten angezeigt. Wenn diese Meldung für ein nicht stummgeschaltetes Video nicht angezeigt wird, hat Chrome möglicherweise die Wiedergabe des Videos zugelassen, weil Sie mit der Seite interagiert haben.

enter image description here

Und schließlich, wenn Sie Angular verwenden (wo alles dynamisch hinzugefügt wird), funktionieren die folgenden Funktionen zum Stummschalten des Videos:

 @ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;

Dann, wenn Sie es spielen wollen:

 const video: HTMLVideoElement = this.bunnyVideo.nativeElement;

 // explicitly mute it...
 video.muted = true;

 // ...before attempting to play
 video.play().catch((err) => {
    alert('video error ' + err);
 });
4
Simon_Weaver

In Angular Fall kann man versuchen [muted] = "'muted'", es funktioniert für mich.

<video id="video" style="width:100%; height:100%" autoplay [muted]="'muted'" loop>
  <source src="./../../assets/video/model-video.mp4" type="video/mp4">
</video>
3
Ronnie

Um über HTML5 direkt anstelle von jQuery stummzuschalten, können Sie auch volume="0" innerhalb des Video-Tags verwenden, d. H.

<video preload="true" autoplay="" volume="0" poster="img/example.jpg">
1
SM23

Stellen Sie sicher, dass Ihr Audio-Codec auf AAC eingestellt ist, wenn Sie ein Video produzieren. Ich hatte das gleiche Problem mit OpenShot, wobei die Standardeinstellung AC3 ist.

0
user3141094

Das funktioniert gut für mich.

<video oncanplay="this.muted=true" id="video" width="640px" height="350px" autoplay loop controls> <source src="intouchables.f4v" type="video/mp4"> Your browser does not support the video tag. </video>

0