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

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

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

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

以下是使用JS进行User-Agent comprobation的一个简单示例：

    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

    }

您可以使用多种语言对此进行验证，但已经开发了许多选项。

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

1 个答案: