Die Wiedergabeschaltfläche wird auf Mobilgeräten im Hintergrundbild angezeigt

Lesezeit: 2 Minuten

Benutzer-Avatar
Staffan Estberg

Also habe ich dieses Skript geschrieben, das überprüft, ob der Besucher ein mobiles Gerät oder einen Desktop verwendet, um festzustellen, ob ein Hintergrundvideo angezeigt werden soll oder nicht (wenn es sich um ein mobiles Gerät handelt, ist die Ausgabe stattdessen ein statisches Bild).

Aus irgendeinem Grund sehe ich am Ende eine Play-Schaltfläche, die das Hintergrundbild auf dem mobilen Layout überlagert. Dies ist der Code (Hinweis: Die Website basiert auf WP und verwendet die wp_is_mobile() Funktion zur Gerätebestimmung) –

<section class="hero">
        <?php
    /*
    Display background image
    */
    if ( (get_field( 'hero_display' ) == 'image') || (wp_is_mobile()) ) :
    $hero_image = get_field('hero_image');
    ?>
    <div class="background-image" data-sm="<?php echo $hero_image['sizes']['sm']; ?>" data-md="<?php echo $hero_image['sizes']['md']; ?>" data-lg="<?php echo $hero_image['sizes']['lg']; ?>"></div>
    <?php endif; ?>

    <?php
    /*
    Display background video
    */
    if ( (get_field( 'hero_display' ) == 'video') && (!wp_is_mobile()) ) :
    ?>
    <div class="background-video">
        <video autoplay="autoplay" preload="auto" poster="https://stackoverflow.com/questions/30938798/<?php the_field("hero_capture' ); ?>" loop="loop" muted="true" class="background-video">
            <source src="https://stackoverflow.com/questions/30938798/<?php the_field("hero_source' ); ?>" type="video/mp4">
        </video>
    </div>
    <?php endif; ?>
</section>

Hier können Sie die laufenden Arbeiten einsehen – http://52.17.182.78

Jede Hilfe oder Anleitung wird sehr geschätzt.

Edit: Gelöst! Es sind einige Tricks erforderlich, damit alles auf iOS7+ (und auch auf Android-Geräten möglich) korrekt angezeigt wird, siehe diesen Artikel –
https://css-tricks.com/custom-controls-in-html5-video-full-screen/

  • Funktioniert die Funktion wp_is_mobile() korrekt?

    – Sarah

    22. Juni 2015 um 6:41 Uhr

  • Das sind nicht genug Informationen. Idealerweise teilen Sie auch die HTML-Ausgabe sowie Ihre CSS-Regeln für mobile Geräte.

    – rnevius

    22. Juni 2015 um 7:16 Uhr

  • @sarath Ja, es funktioniert einwandfrei. Es stellte sich heraus, dass ich bestimmte CSS-Einstellungen anwenden muss, damit die Schaltfläche verschwindet, siehe meinen aktualisierten Beitrag.

    – Staffan Estberg

    22. Juni 2015 um 7:20 Uhr

Nun, wie wäre es, es andersherum zu versuchen? Machen Sie das Bild als Standard und wenn es nicht auf dem Handy ist, versuchen Sie es mit Video 😉

Versuchen Sie, dem Video-Tag das Attribut “controls=”false”” hinzuzufügen.

  • Danke, habe es versucht, aber es hat nichts bewirkt. Der Knopf ist noch da.

    – Staffan Estberg

    20. Juni 2015 um 8:28 Uhr

1365930cookie-checkDie Wiedergabeschaltfläche wird auf Mobilgeräten im Hintergrundbild angezeigt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy