Fehler: Video Autoplay funktioniert in Google Chrome nicht

Patric Karl's Avatar

Patric Karl

02 May, 2018 07:59 AM

Produkt: Slider Contao
Contao-Version: 3.5
Browser und Browserversionen: Chrome

Sehr geehrtes Support-Team,

wir erstellen gerade für eine Band eine Website und würden den Header gerne mit dem Rocksolid Slider Realisieren. Leider wird das Video, welches wir schon in mehreren Versionen (webm / mp4) hochgeladen haben, beim Chrome Browser nicht automatisch abgespielt (wir haben bereits den Ton entfernt, da dies ja mittlerweile bei Chrome Probleme verursachen kann).
Vielleicht können Sie uns bei diesem Problem unterstützen,

Mit freundlichen Grüßen,
Patric Karl

  1. Support Staff 1 Posted by RockSolid Theme... on 02 May, 2018 02:12 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Autoplay-Videos sind in Chrome nicht mehr ohne Benutzerinteraktion möglich wenn diese nicht stumm geschalten sind. Die Option ein Video stumm zu schalten gibt es im Slider derzeit noch nicht, wir haben dieses Feature jedoch auf unserer Wunschliste vermerkt und werden beim nächsten Update die Umsetzung prüfen.

  2. 2 Posted by Patric Karl on 02 May, 2018 02:42 PM

    Patric Karl's Avatar

    Vielen Dank für Ihre Antwort.
    Das seltsame ist nur, dass das Video, welches wir verwenden, bereits stummgeschaltet ist (Tonspur wurde schon vor dem Upload entfernt).
    Trotzdem wird es jedoch nicht automatisch abgestellt. Gibt es da einen Workaround?

    Viele Gr0ße.

  3. Support Staff 3 Posted by RockSolid Theme... on 03 May, 2018 07:23 AM

    RockSolid Themes's Avatar

    Damit der Chrome-Browser das Video abspielt, muss es im HTML-Video-Element selbst stummgeschaltet werden. Ob überhaupt eine Tonspur existiert, prüft der Browser hierbei nicht.

    Als Workaround können Sie ein angepasstes rsts_default.html5-Template mit folgendem Inhalt erstellen:

    <?php $this->extend('rsts_default') ?>
    <?php $this->block('script_bgvideo') ?>
        slider.find('video[data-rsts-background], [data-rsts-type=video] video').each(function() {
            this.muted = true;
            this.defaultMuted = true;
            // Disable mejs for videos
            this.player = false;
        });
    <?php $this->endblock() ?>
    
  4. 4 Posted by Patric Karl on 03 May, 2018 11:34 AM

    Patric Karl's Avatar

    ...ich habe das snippet in das Template eingefügt. Im Frontend wird nun bei den Video properties "muted" angezeigt. Jedoch wird es immer noch nicht automatisch abgespielt. Mache ich noch was falsch?

    (Link zur Website wäre, falls noch nicht genannt develop.cosmopauli.de)

    Viele Grüße.

  5. Support Staff 5 Posted by RockSolid Theme... on 04 May, 2018 06:41 AM

    RockSolid Themes's Avatar

    Anscheinend wird der Fehler auf Ihrer Seite durch das mmenu-Skript verursacht. Ohne mmenu wurde das Video auf Ihrer Seite im Chrome-Browser in unseren Tests abgespielt.

  6. 6 Posted by Markus on 28 May, 2018 10:55 AM

    Markus's Avatar

    Auf unserer Seite wird ein Video im Chrome ebenfalls nicht abgespielt (Oneo). An welcher Stelle genau muss das Template angepasst werden?

  7. Support Staff 7 Posted by RockSolid Theme... on 28 May, 2018 02:11 PM

    RockSolid Themes's Avatar

    Ein angepasstes Template können Sie im Backend unter „Layout › Templates“ über den Button „Neues Template“ erstellen. Der PHP-Code für dieses Template ist dann der aus dem vorherigen Kommentar.

  8. 8 Posted by Markus on 28 May, 2018 02:13 PM

    Markus's Avatar

    Ich weiss. :) Aber wo genau im Template rsts_default.html5 muss ich den Code einbinden?

  9. Support Staff 9 Posted by RockSolid Theme... on 28 May, 2018 03:05 PM

    RockSolid Themes's Avatar

    Der oben angegebene PHP-Code ist der gesamte Inhalt des Templates. D. h. nachdem Sie das Template erstellt haben, können Sie den kompletten Inhalt der Datei entfernen und danach den neuen Code einfügen.

  10. 10 Posted by Markus on 28 May, 2018 03:21 PM

    Markus's Avatar

    Interessanterweise wird das Video abgespielt, wenn die Entwicklertools aktiv sind. Sobald ich diese ausschalte, wird kein Video angezeigt (nur in Chrome)

  11. Support Staff 11 Posted by RockSolid Theme... on 28 May, 2018 03:26 PM

    RockSolid Themes's Avatar

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  12. 12 Posted by Markus Pfeifer on 28 May, 2018 03:35 PM

    Markus Pfeifer's Avatar

    reindesign.net <http://reindesign.net/>

  13. Support Staff 13 Posted by RockSolid Theme... on 29 May, 2018 08:32 AM

    RockSolid Themes's Avatar

    Auf Ihrer Seite ist das Video nicht als Hintergrundvideo eines Slides eingebunden, sondern über ein „Zentrierter Bereich“-Inhaltselement.

    Damit im zentrierten Bereich das Video stumm geschalten wird, können Sie das Template templates/oneo/rsce_oneo_centered_wrapper_start.html5 bearbeiten und den Code
    <video class="no-mejs" autoplay loop
    mit
    <video class="no-mejs" muted autoplay loop
    ersetzen.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac