html - 如何仅显示移动设备的 html 视频海报

Question

我目前在一个 div 中有一个 HTML 视频，可以为桌面浏览器自动播放。我正在尝试实施一个修复程序，禁用video移动设备并仅在其位置显示视频海报。我觉得它应该是一个简单的修复，但我找不到任何 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”或任何其他来检查页面是否在移动设备中加载。