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

【问题标题】：How to just display html video poster for mobile device如何仅显示移动设备的 html 视频海报
【发布时间】：2016-02-23 14:56:15
【问题描述】：

我目前在一个 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>

【问题讨论】：

标签： html css video mobile poster

【解决方案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”或任何其他来检查页面是否在移动设备中加载。

【讨论】：

$(".col-1 no-padding") 应该是 $(".col-1.no-padding")