Fehler: Audioplayer erscheint nicht in Chrome und Brave

rocksolidthemes.com's Avatar

rocksolidthemes.com

13 Dec, 2019 01:52 PM

Produkt: Tao Contao
Contao-Version: 4.8
Browser und Browserversionen: alle

Ich habe eine MP3-Datei hochgeladen. Die läuft auch, wenn man sie über den angegebenen Pfad aufruft. Aber auf meiner Seite wird der Audioplayer nicht angezeigt. Rufe ich die Tao-Demo auf eurer Website auf, ist der Player dort zu sehen.

Weitere Tests haben nun ergeben: Safari und Firefox zeigen den Player. Chrome und Brave zeigen ihn nicht. Gibts da irgendeinen Trick oder etwas, das ich nicht weiß? Per CSS hab ich dem Player mal testweise Maße gegeben und einen schwarzen Hintergrund. Gleiches Verhalten, nur dass man bei Chrome und Brave halt eine leere schwarze Box sieht.

Jetzt hab ich mir mal den Code angesehen. Bis auf die width="100%" sieht es plausibel aus. Ich habe den Tao-Youtubeplayer umbenannt, weil ich das Vorschaubild wollte. Aber damit kann es ja nichts zu tun haben. Auch ein paar Anpassungen per CSS habe ich in den custom.css vorgenommen. Aber nichts, was auch nur entfernt diesen Player ausblenden würde.

  1. Support Staff 1 Posted by RockSolid Theme... on 16 Dec, 2019 07:05 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Anscheinend handelt es sich hierbei um einen Fehler in der Rendering-Engine des Chrome Browsers (der Brave Browser nutzt dieselbe Engine).

    Um den Fehler zu korrigieren fügen die bitte folgenden CSS-Code in die Datei files/tao/css/custom.css ein:

    .audio_container audio {
        height: 40px;   
    }
    

    In der neuesten Version des Themes ist dieser Darstellungsfehler bereits behoben.

  2. 2 Posted by rocksolidthemes... on 16 Dec, 2019 11:47 AM

    rocksolidthemes.com's Avatar

    Leider löst das mein Problem nicht. Ich habe sichergestellt, dass die Datei aktualisiert wurde, indem ich einen anderen Stil geändert habe. Auch !important hat nichts geändert (man weiß ja nie :)

    Es sieht so aus, als ob einfach überhaupt nichts dargestellt wird. Auch wenn ich auf das audio-Tag einfach mal einen Background vergebe, ist nichts zu sehen. Beim Container dagegen schon.

    Hat jemand noch eine Idee, woran es liegten könnte?

  3. Support Staff 3 Posted by RockSolid Theme... on 16 Dec, 2019 12:17 PM

    RockSolid Themes's Avatar

    Bitte senden Sie uns Ihre custom.css-Datei damit wir versuchen können den Fehler nachzustellen.

  4. 4 Posted by rocksolidthemes... on 16 Dec, 2019 12:18 PM

    rocksolidthemes.com's Avatar

    Ich hab es hinbekommen. Es klappt jetzt mit genau diesem CSS:

    .audio_container audio { }
    
    audio {
        height: 40px !important;    
        display: block !important;
    }
    

    Und - ja, diese leere .audio_contrainer {} muss sein, sonst funktioniert es nicht.

    Da bei mir alles auf einer leeren HTML-Seite funktioniert und ich nur sehr überschaubar CSS per custom.css angepasst habe, kann ich ausschließen, dass ich irgendwas ausgeblendet habe.

    Was immer dort das audio-Tag ausblendet, wird also irgendwie von Tao verursacht sein. Vielleicht bin ich einen ungewöhnlichen Weg gegangen, weil bei mir das Audio auf einer Nachrichten-Seite steht.

  5. 5 Posted by rocksolidthemes... on 16 Dec, 2019 12:23 PM

    rocksolidthemes.com's Avatar

    Hier kommz kommt meine custom.css. Sie ist noch etwas rustikal, denn ich bin noch am herumprobieren.

  6. Support Staff 6 Posted by RockSolid Theme... on 17 Dec, 2019 06:02 AM

    RockSolid Themes's Avatar

    In Ihrer custom.css-Datei hat sich ein Fehler eingeschlichen an folgender Stelle:

    .tom-center
    { text-align: center};
    

    Durch diesen Fehler wird die nächste CSS-Regel ignoriert weshalb es in Ihrem Fall ohne die leere Anweisung nicht mehr funktioniert. Hier muss das ; vor die schließende Klammer } verschoben werden. Danach können Sie den von uns vorgeschlagenen CSS-Code verwenden.

  7. 7 Posted by rocksolidthemes... on 22 Dec, 2019 11:53 AM

    rocksolidthemes.com's Avatar

    Oh je, das ist sehr peinlich. Vielen Dank für die Hilfe :)

  8. 8 Posted by Mathias on 06 Jan, 2020 05:06 PM

    Mathias's Avatar

    Der Hinweis auf height: 40px; hat mir auch geholfen, im Chrome den Player zu sehen. Danke!

    Andere Frage: wie kann ich das Herunterladen der Audio-Datei aus dem Player entfernen (bei den 3 senkrechten Punkten)?

  9. Support Staff 9 Posted by RockSolid Theme... on 07 Jan, 2020 06:40 AM

    RockSolid Themes's Avatar

    In einem eigenen ce_player.html5-Template können Sie dem Audio-Tag das Attribut controlslist="nodownload" hinzufügen.

    Beachten Sie jedoch bitte, dass dieses Attribut nicht von allen Browsern unterstützt wird und auch mit Browser-Unterstützung den Download der Audio-Datei nicht gänzlich unterbinden kann.

  10. 10 Posted by stesso on 05 May, 2020 08:04 PM

    stesso's Avatar

    Um den Download zu unterbinden, wie müsste die ce_player.html5 dann aussehen, d.h. an welcher Stelle ergänze ich das Attribut?

    <?php $this->extend('ce_player') ?>
    <?php
        if (!$this->isVideo) {
            $this->size = ' width="100%"';
        }
    ?>
    
  11. Support Staff 11 Posted by RockSolid Theme... on 06 May, 2020 08:49 AM

    RockSolid Themes's Avatar

    Der PHP-Code für das Template kann z. B. folgendermaßen aussehen:

    <?php $this->extend('ce_player') ?>
    <?php
        if (!$this->isVideo) {
            $this->size = ' width="100%"';
            $this->attributes = array_merge($this->attributes, ['controlslist="nodownload"']);
        }
    ?>
    
  12. 12 Posted by stesso on 06 May, 2020 02:14 PM

    stesso's Avatar

    You rock, solid! Dankeschön!

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