如何仅在移动设备上替换HTML5视频

Question

背景

我正在研究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>

Answer 1

最佳方法是使用媒体查询。

yo可以检查其他导航器或环境变量以检查设备是什么而不是100％可靠。

存在更多检测设备的方法，它使用用户代理字符串与特定的HTTP标头结合使用来检测移动环境。

这是JS用户代理组成的简单示例：

    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
    }

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