it-swarm.com.de

HTML 5 Video "Autoplay" wird in CHROME nicht automatisch gestartet

Ich habe folgenden Code:

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>

Das Video:

  1. wird sowohl in Chrome als auch in Firefox angezeigt
  2. In Firefox läuft es wie erwartet
  3. In Chrome werden jedoch nicht "Autostarts" angezeigt. Das ist das Problem.
  4. Wenn ich darauf klicke (in Chrome), läuft es ok

Versucht

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

In Chrome hat nichts funktioniert

Dann habe ich auch versucht, den Codec zu ändern, wie in https://en.wikipedia.org/wiki/HTML5_video empfohlen, aber es hat auch nicht funktioniert:

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

Jetzt bin ich in einer Sackgasse. Danke für alle Hinweise! Sehr geschätzt.

29
jon

Sie müssen playsinline autoplay muted loop, Chrome nicht zulassen, dass ein Video automatisch gestartet wird, wenn es nicht stummgeschaltet ist. Außerdem weiß ich jetzt nicht, warum es nicht in allen Android-Geräten funktioniert ich lasse es dich wissen

Chrome-Problem: Nach einigen Nachforschungen habe ich herausgefunden, dass es bei Chrome manchmal nicht funktioniert, da Sie in responsive den Datenschoner aktivieren können und jedes Video für den automatischen Start blockiert

62
sebas sierra

Ich habe gerade diesen Artikel gelesen und es heißt:

Wichtig: Die Reihenfolge der Videodateien ist wichtig. Chrome hat derzeit einen Fehler, bei dem ein .webm-Video nicht automatisch abgespielt wird, wenn es nach etwas anderem kommt.

Es sieht also so aus, als wäre Ihr Problem gelöst, wenn Sie .webm zuerst in Ihre Liste der Quellen aufnehmen. Hoffentlich hilft das.

5
ahutch

Zum Zeitpunkt der Frage war dies möglicherweise nicht der Fall, aber ab Chrome 66 ist autoplay gesperrt.

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

5
extremeandy

Probieren Sie dies aus, wenn ich versucht habe, stummgeschaltet zu sein. Überprüfen Sie diese Demo in codpen .

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

skript

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})
3
Techno Deviser

Diese Frage wird hier ausführlich beschrieben
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL; DR Sie können immer noch muted Videos automatisch abspielen

Wenn Sie Videos unter iOS automatisch abspielen möchten, fügen Sie das Attribut playsInline hinzu, da iOS standardmäßig versucht, Videos im Vollbildmodus anzuzeigen
https://webkit.org/blog/6784/new-video-policies-for-ios/

2
Dmitry Naumov

Versuche dies:

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

Und stell diese js danach:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});
2
Yahya

Extremeandy hat erwähnt, dass seit Chrome 66 das automatische Abspielen von Videos deaktiviert wurde.

Nach einem Blick darauf habe ich festgestellt, dass stummgeschaltete Videos immer noch automatisch abgespielt werden können. In meinem Fall hatte das Video kein Audio, aber das Hinzufügen des Video-Tags durch Stummschalten wurde behoben:

Hoffentlich hilft das auch anderen.

1
skawars

Dies sind die Attribute, die ich verwendet habe, um Videos für die automatische Wiedergabe zu aktivieren. Chrome - onloadedmetadata="this.muted = true", playsinline, autoplay, muted, loop

Beispiel:

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>
0
Darryl Mendonez