Unterschiedliches Verhalten bei Video einbinden

[Dee]

Tach zusammen

Ich habe mir mal die Erweiterung "html5media" (3.2.0.9008) geholt und einen Film auf der Seite eingebunden.
Im Inhaltselement habe ich eine MP4, OGV und WebM hinterlegt. Zudem habe ich die Checkboxen aktiviert, so dass der Film automatisch abgespielt wird und der Film wiederholt wird.

Das funktioniert eigentlich soweit, nun ist es aber so dass ich in den Browsern ein unterschiedliches Verhalten habe und ich nicht genau weiss, wie es in den Browser hinkriege. Hier mal die Zusammenstellung:

Firefox: Startet automatisch | wiederholt den Film (so sollte es ja auch sein )
Chrome: Startet nicht automatisch | wiederholt den Film
Opera: Startet nicht automatisch | wiederholt den Film
Safari: Startet automatisch | wiederholt den Film nicht

IE: Funktioniert so gut wie nix, da sieht die Website sowieso scheisse aus (werde ich in einem zweiten Schritt optimieren)

Das selbe Erlebnis habe ich auch, wenn ich nur den Video-Code verwende, daher gehe ich der Annahme, dass dies lediglich am Verhalten der Browser liegt.

    <video autoplay loop width="2048" height="1536" >
		<source src="tl_files/brunello-caffee/videos/regelmaessige-lieferung.webm" type="video/webm" />
  		<source src="tl_files/brunello-caffee/videos/regelmaessige-lieferung.ogg"  type="video/ogg" />
   		<source src="tl_files/brunello-caffee/videos/regelmaessige-lieferung.ogv"  type="video/ogv" />
   		<source src="tl_files/brunello-caffee/videos/regelmaessige-lieferung.mp4"  type="video/mp4" /> 	
   		<source src="tl_files/brunello-caffee/videos/regelmaessige-lieferung.flv"  type="video/flv" /> 
    </video>

Kennt sich wer damit aus und kann mir einen Tipp geben, wie ich das Verhalten bei den unterschiedlichen Browser auf einen Nenner bringe?

THX

[kischd]

Ich habe das gleiche Verhalten bei dem Elementtyp Video/Audio.
Ich habe ein mp4 eingebunden. Im Firefox läuft das mit Autoplay sofort los.

Bei Edge, Internet Explorer und Chrome muss man das per Hand starten.
Ich hätte dies jedoch als Autoplay.

Weiß jmd rat?

[Andreas]

Ich meine, ich hätte gesehen, dass man das in diesen Browsern mit nem kleinen Script dann nochmal explicit starten muss. HTML mit Attributen reicht in diesen Browsern wohl nicht mehr aus. Lösungen findest du bestimmt im Netz, wahrscheinlich auf stackoverflow.

[kischd]

Mit firebug hab ich das hinbekommen:
ich hab nur bei <video controls autoplay> ergänzt.

http://easyhtml5video.com/help/html5...toplay-16.html

jetzt muss ich noch das korrekte template finden...

[kischd]

Eigentlich steht das ja schon in der ce_player drin:

    <video <?php echo $this->size; ?><?php if ($this->poster): ?> poster="<?php echo $this->poster; ?>" preload="none"<?php endif; ?><?php if ($this->autoplay): ?> autoplay<?php endif; ?> controls>

Das autoplay und controls wird aber bei der Ausgabe nicht berücksichtigt.
Wenn ich das autoplay im Firebug wieder einfüge, startet der Film.

warum ist das so?

[Spooky]

Welche Contao Version? Verwendest du Extensions?

[Andreas]

Das liegt daran, dass einige Browser, ich glaube seit diesem Jahr, das autoplay blockieren. Geht evtl. noch, wenn du neben autoplay auch muted benutzt. Ansonsten, wie bereits oben erwähnt, kannst du das Video mit einem kleinen Script mit ...play() manuell starten, z.B. nachdem der DOM geladen ist.

https://www.heise.de/newsticker/meld...n-3833952.html

[kischd]

Hab überhaupt kein Plan von Script ,-)

aber ich glaub ich hab was gefunden.

    <script>
            var vid = document.getElementById('video');

function playVid() { 
    vid.play(); 
}
        </script>

'video') ist doch bestimmt die Klasse des Videos im HTML....

Was/Wo genau ist der DOM.
Kann ich das einfach als HTML-Element nach dem Video einfügen?

[kischd]

Ich nutze aktuell die 3.5.27.

Dann macht der autoplay button im Backend aktuell ja keinen Sinn oder?
Ist das in C4 auch so?

[Dee]

Den mit dem Autostart für alle Browser habe ich noch nicht hingekriegt.

Für den Loop habe ich mit folgendem Script nachgeholfen, was eigentlich ganz gut funktioniert:

<script>
var myVideo = document.getElementById('vid');
  if (typeof myVideo.loop == 'boolean') { // loop wird unterstützt
  myVideo.loop = true;
  }
 else { // loop wird nicht unterstütz
 myVideo.addEventListener('ended', function () {
    this.currentTime = 0;
    this.play();
  }, false);
}

myVideo.play();
 </script>

Edit: Dein Script habe ich fix eingebunden, bei mir funktioniert das aber nicht. Egal ob ich es zu Beginn der Seite einbinde oder am Schluss

Wie wo was kann ich unter dem DOM verstehen?

[kischd]

wo platzierst du das genau?

[Dee]

Das Loop-Script habe ich im Seitenlayout unter "Eigener JavaScript-Code" eingefügt.

[Spooky]

Ist das in C4 auch so?

Das Problem, dass Andreas angesprochen hat, hat nichts mit Contao zu tun.

[kischd]

Das Problem, dass Andreas angesprochen hat, hat nichts mit Contao zu tun.

Das hab ich schon verstanden.
Aber dann macht ja die Auswahl für autoplay keinen Sinn.
Das meinte ich.

[Spooky]

Das hab ich schon verstanden.
Aber dann macht ja die Auswahl für autoplay keinen Sinn.
Das meinte ich.

Die Auswahl für autoplay fügt den autoplay Parameter ein, welcher im HTML5 Standard vorhanden ist: https://www.w3.org/TR/2011/WD-html5-...media-autoplay
In so fern macht das natürlich Sinn .

[kischd]

gut du hast recht ;-)

[Dee]

Dann bleibt wohl nur JavaScript... hat wer einen Ansatz? Meine Kenntnisse sind begrenzt bin aber gerne bereit mich dem zu versuchen

Edit: oh da gibt es ja bereits einen Ansatz von kischd...

[Dee]

mit einem kleinen Script mit ...play() manuell starten, z.B. nachdem der DOM geladen ist.

Was genau ist gemeint mit DOM - kann mir das wer erklären?

[Andreas]

DOM: https://de.wikipedia.org/wiki/Document_Object_Model

Es gibt viele Beispiele im Netz, wie man ein Video im HTML5 VIDEO-Tag per JS starten kann.

Zeitpunkte zum Starten:

• Nachdem der DOM geladen (vorhanden) ist (macht jedes j_- und moo_-Template von Contao)
• Nachdem alle Requisiten der Seite geladen sind - load Event
• Mit zeitlicher Verzögerung - setTimeout()
• Wenn das Video bereit ist abgespielt zu werden - oncanplay
• ...

Ich würde das nicht als CE einfügen, sondern in meine eigene Script-Datei, Beispiele: files/js/misc.js, oder j_misc.html5 Template.

Das Autoplay im CE würde ich dann nicht anhaken, damit es für alle Browser gleich ist. Ich würde dem CE ne Klasse "autoplay" mitgeben und dann diese Videos mit JS suchen und starten. (Oder Template ändern: Attribut AUTOPLAY rausschmeißen und Attribut class="autoplay" hinzufügen oder data-video="autoplay").

Ganz grob: Wenn du jQuery aufgesetzt hast, kannst du so nach diesen Videos suchen und sie starten (ungetestet)

var myAutoplayVideos = $('video.autoplay');

// Debugausgabe in der Konsole der Devtools zum Testen
console.log(myAutoplayVideos);
console.debug(myAutoplayVideos);
console.dir(myAutoplayVideos);

myAutoplayVideos.play(); 

Dein Code

document.getElementById('video') 

sucht, wie der Name bereits vermuten lässt, nach dem einen Element auf der Seite mit der ID "video". Deswegen hat das bei dir u.a. wahrscheinlich auch nicht funktioniert.

Tipp: Du kannst mal versuchen das Video direkt mit den Devtools im FF im Tab JS-Umgebung mit deinem Code zu starten. Dann brauchst du die Seite nicht immer neu zu laden und müsstest auch direkt Fehler angezeigt bekommen.

[Andreas]

Mit firebug hab ich das hinbekommen:

Du musst mit den Devtools arbeiten, da Firebug nicht mehr weiterentwickelt wurde und teilweise, gerade bei JS, nicht mehr funktioniert.