css - 防止将html5视频元素加载到触摸设备上。

我目前正在制作全屏视频背景。通常对于触摸设备（iPad，iPhone等），我只会使用CSS隐藏video元素并显示图像。

出于好奇，我去看看不同的网站针对其html5视频背景使用了哪些响应解决方案。从那时起，我注意到AirBnB根本没有在触摸设备上加载html5视频元素（我在iPad和iPhone上进行了测试，但还没有在android上进行过测试）。如果您在触摸设备上查看网站，您会注意到视频元素完全“消失”。

所以我的问题是，防止html5视频在触摸设备上加载的最佳方法是什么？

最好用php或jquery（我也将modernizr加载到我的网站。）。

最佳答案

用Javascript：

if("ontouchstart" in document.documentElement){
    var video = document.querySelectorAll("video")[0];
    var img = document.createElement("img");

    //set img attributes here

    video.parentNode.replaceChild(img, video);

}