Как просто отобразить HTML-видео постер для мобильного устройства

Question

В настоящее время у меня есть HTML-видео внутри div, которое автоматически воспроизводится для настольных браузеров. Я пытаюсь реализовать исправление, которое отключает video для мобильного и отображает только видео POSTER на своем месте. Я чувствую, что это должно быть простое исправление, но я не могу найти какой-либо CSS или JS, чтобы сделать это.

Код ниже:

<div class="row">
    <div class="col-1 no-padding">
         <video loop muted autoplay poster="images/joe-rule/banner.jpg" class="width">
            <source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
    </video>
    </div>
</div>  

Answer 1

Это то, что я сделал

в формате HTML:

<div class="row">
<div class="col-1 no-padding">
     <video loop muted autoplay class="width">
        <source src="images/joe-rule/video-reel.mp4" type="video/mp4" >
</video>
</div>

в js:

проверьте, загружена ли страница в мобильном телефоне

if (isMobile) { $(".col-1 no-padding").find('video').attr('poster', 'images/joe-rule/banner.jpg'); }

Так что плакат будет отображаться только в мобильном телефоне.

вам может понадобиться поискать использование "isMobile" или любой другой, чтобы проверить, загружена ли страница в мобильном телефоне.