Question

我正在使用DIVI，Wordpress和我有这个视频我设置为桌面的背景但是我禁用它用于移动和平板电脑但是这里的事情，禁用选项的作用只是一个显示：没有如此视频仍在加载DOM。

有没有办法完全阻止加载对象？所以它确实会影响移动设备上的加载时间吗？

分享您的想法，请

Answer 1

是的，翻转你的逻辑：

永远不要加载剪辑，除非它是一个功能强大的设备。

您可以使用javascript检查屏幕宽度是否足够宽广（甚至更好：检查设备是否支持您的剪辑，wifi中的某些平板电脑也可以经常显示它。）
如果您决定可以播放，请向页面添加视频元素（或将src添加到您的元素中）并触发播放事件。

顺便说一句：这个技巧可以应用于很多资源，例如图像。

Answer 2

根据Ian友好提出的建议，这是我的工作解决方案。

首先，我将每个视频的子源元素更改为具有如下属性data-src：

<video id="my-id">    
   <source data-src="somevideo.mp4">
</video>

然后，在使用我修改为http://detectmobilebrowsers.com/的脚本执行移动检查后，我修改了包含iPad等（此处有相关的答案）我只是使用以下脚本自动更新每个视频的src属性（如果在我的情况下我们在桌面上）：

var sources = document.querySelectorAll('video#my-id source');
// Define the video object this source is contained inside
var video = document.querySelector('video#my-id');
for(var i = 0; i<sources.length;i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
// If for some reason we do want to load the video after, for desktop as opposed to mobile (I'd imagine), use videojs API to load
video.load();

那就是它！移动设备上没有任何东西加载，我可以对它将要或不会加载的设备进行相当精细的控制。

希望这有助于某人。

CSS显示：没有更好的解决方案？

2 个答案: