如何仅在移动设备上用图像替换 HTML5 视频答案

【问题标题】：How to replace HTML5 videos with images only on mobile devices如何仅在移动设备上用图像替换 HTML5 视频
【发布时间】：2017-11-23 16:29:39
【问题描述】：

背景

我正在开发一个 HTML5 视频比较滑块。默认情况下，一个视频的 50% 会在一秒内显示。用户可以向左或向右移动两个视频中间的滑块以查看更多或更少的视频。两者都设置为自动播放并连续循环。

但是，此功能在移动设备上效果不佳，因此我决定在移动设备上显示图像而不是视频会更好。

问题我知道我可以使用媒体查询或 JavaScript 来检测小屏幕尺寸并切换内容。但是，我需要定位设备而不是屏幕宽度。有没有可靠的方法来实现这一目标？

<div class="slider-video__container">
                <div class="slider-video__content">
                    <video autoplay loop playsinline muted>
                        <source src="/img/slider-video/Fragment_02_Light.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="slider-video__seperator">
                    <span class="slider-video__handle"></span>
                </div>
                <div class="slider-video__content">
                    <div class="slider-video__content--resize">
                        <video autoplay loop playsinline muted>
                            <source src="/img/slider-video/Fragment_01_Dark.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>

【问题讨论】：

标签： html mobile slider html5-video

【解决方案1】：

最好的方法是使用媒体查询。

您可以检查其他导航器或环境变量来检查设备是什么，但不是 100% 可靠。

存在更多检测设备的方法，它使用User-Agent字符串结合特定的HTTP头来检测移动环境。

这是一个使用 JS 的 User-Agent 审查的简单示例：

    if(! navigator.userAgent.match(/Android/i) &&
            ! navigator.userAgent.match(/webOS/i) &&
            ! navigator.userAgent.match(/iPhone/i) &&
            ! navigator.userAgent.match(/iPod/i) &&
            ! navigator.userAgent.match(/iPad/i) &&
            ! navigator.userAgent.match(/Blackberry/i) )
    {
        // do desktop stuff

    } else if ( navigator.userAgent.match(/iPad/i) ) 
    {
       // do tablet stuff

    }

您可以从多种语言中验证这一点，但已经开发了许多可用的选项。

【讨论】：