Question

我正在创建一个网站，在div中我有一个视频，但我不想在移动设备上显示这个视频，所以我使用hidden-xs和hidden-sm，到目前为止太好了。

但是，我的问题是，当我使用这些课程时，视频没有下载或只是没有显示？因为，他们之间存在巨大差异，考虑移动数据计划的数据消费。

在Chrome上使用开发工具，在网络标签上使用3g，无法显示是否已下载。

那么，如何100％确定使用什么？ hidden-xs和sm或CSS媒体查询？

而且，我完全了解使用者，但是，其中有一千个。所以我需要指定其中的每一个。我有一个代码片段，但我认为根本不是一个好主意......不幸的是......

干杯= D

Answer 1

这是依赖于浏览器的情况。一般来说，即使在媒体查询中，浏览器也不会显示隐藏的内容。

为防止视频下载您不需要JavaScript ，请简单添加preload: none或preload: metadata（如果您想要检索有关该文件的基本信息）作为video属性。

来自the <video> specification

preload =＆＃34; 无＆＃34;或＆＃34; 元数据＆＃34;或＆＃34; 自动＆＃34;或＆＃34;＆＃34; （空   string ）或empty表示是否向UA提示   乐观下载视频本身或其元数据   被认为是值得的。


＆＃34; 无＆＃34;：提示UA用户不需要视频，或者最大限度地减少不必要的流量。

＆＃34; 元数据＆＃34;：向UA提示用户不需要视频，但提取其元数据（尺寸，先是   框架，曲目列表，持续时间等等是可取的。

*＆＃34; 自动＆＃34;：对于乐观地下载整个视频的UA的提示被认为是可取的。**

指定空字符串相当于指定值＆＃34; auto＆＃34;。

Answer 2

正在下载，通过使用连接到手机的Chrome调试工具进行验证，该文件仍在下载中。因此，解决方案是使用js添加视频。

使用此html添加视频：

<video preload="none" class="hidden-xs" autoplay="autoplay" poster="fallback-image.jpg" loop="loop" id="myVideo">
</video>

但首先使用javascript检测移动设备，并在不是移动浏览器时添加视频：

function detect() { 
    if(navigator.userAgent.match(/Android/i)
       || navigator.userAgent.match(/webOS/i)
       || navigator.userAgent.match(/iPhone/i)
       || navigator.userAgent.match(/iPad/i)
       || navigator.userAgent.match(/iPod/i)
       || navigator.userAgent.match(/BlackBerry/i)
       || navigator.userAgent.match(/Windows Phone/i)){

        // If mobile browser

    } else {
        // If not mobile
       document.getElementById("myVideo").innerHTML = '<source src="video.webm" type="video/webm"><source src="video.mp4" type="video/mp4">';
    }
}

隐藏-xs hidden-sm里面的视频是下载的？

2 个答案: