Question

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

出于好奇，我去了解不同网站为他们的html5视频背景使用的响应式解决方案。那时我注意到AirBnB没有在触摸设备上加载html5视频元素（我在iPad和iPhone上测试过，我还没有在Android上测试过）。如果您在触摸设备上检查网站，您会发现视频元素完全消失了＃34;

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

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

Answer 1

在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);

}

CSS媒体查询的问题是您无法直接检测触控设备。

Answer 2

最简单的跨浏览器方法是拥有一个占位符元素，如：

<img src="background-img.jpg" data-video-src="video.mp4" class="video-placeholder" />

您只需拥有一个侦听器，可以点击具有样式video-placeholder的元素，并替换为html5视频元素。

类似的东西：

$('body').on('click','.video-placeholder', function(event) {
  //Create video element
  var videoSrc = $(this).data('video-src');
  var video = $('<video></video>');
  video.load(function() { /*Do onload stuff*/ });
  video.attr('src',videoSrc);
  //Replace element
  $(this).replaceWith(video);
});

这显然是一个非常简化的解决方案，但它可以让您了解如何处理它，这样您就不会自动加载视频，除非用户想要播放它。

防止在触摸设备上加载html5视频元素。

2 个答案: