Napisałem więc ten skrypt, który sprawdza, czy użytkownik używa urządzenia mobilnego lub komputera stacjonarnego, aby określić, czy wyświetlać wideo w tle czy nie (jeśli jest to telefon komórkowy urządzenie wyjściowe będzie zamiast tego statycznym obrazem).Przycisk odtwarzania pojawia się na obrazie tła na urządzeniach mobilnych.
Z jakiegoś powodu w końcu widzę przycisk odtwarzania wyśrodkowany nakładający się na obraz tła w układzie mobilnym. Jest to kod (uwaga: strona jest oparta na WP i wykorzystuje funkcję wp_is_mobile() do określenia urządzenia) -
<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="<?php the_field('hero_capture'); ?>" loop="loop" muted="true" class="background-video">
<source src="<?php the_field('hero_source'); ?>" type="video/mp4">
</video>
</div>
<?php endif; ?>
</section>
można zobaczyć w toku tutaj - http://52.17.182.78
Każda pomoc lub wskazówki są bardzo cenne.
Edytuj: Rozwiązane! Jest kilka sztuczek wymaganych do poprawnego wyświetlania na iOS7 + (a także na urządzeniach z Androidem). Zobacz artykuł - https://css-tricks.com/custom-controls-in-html5-video-full-screen/
to funkcja wp_is_mobile() działa poprawnie? – sarath
To nie wystarcza informacji. Najlepiej byłoby udostępnić dane wyjściowe HTML, a także reguły CSS dla urządzeń mobilnych. – rnevius
@sarath Tak, działa poprawnie. Okazało się, że muszę zastosować określone ustawienia CSS, aby przycisk zniknął, zobacz mój zaktualizowany wpis. –