Question

我目前在div中有一个自动播放桌面浏览器的HTML视频。我试图实现一个修复程序，为移动设备禁用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

这就是我做的事情

in 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'); }

这样海报只会在手机上显示。

您可能需要搜索＆＃34; isMobile＆＃34;或任何其他来检查页面是否已在移动设备中加载。

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

1 个答案: