停止在移动设备上加载背景视频
我有一个视频头，我只想在桌面上播放，在手机上使用静态图像头。 我可以将视频隐藏在移动设备上，看起来效果不错，但视频仍在后台加载，并减慢了页面加载速度。 如何在移动设备上停止加载视频。
<video id="bgvid" class="hidden-xs ">
<source type="video/mp4" src="myvideo.mp4"></source>
</video>
<img alt="" style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" />
假设你通过CSS设置可见性，或者在早期的JS代码中，你可以这样做：
data-src属性而不是src 。 如果我们不需要，不需要加载src。 data-src复制到src video元素上调用.load()以获取新值。 $(
function() {
var bgv = $('#bgvid');
if (bgv.is(':visible')) {
$('source', bgv).each(
function() {
var el = $(this);
el.attr('src', el.data('src'));
}
);
bgv[0].load();
}
}
).hidden-xs {
display: none;
}
/* dummy criterion for demo purposes */
@media screen and (min-width: 400px) {
.hidden-xs {
display: block;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="bgvid" class="hidden-xs " controls>
<source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4"></source>
<source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv" />
</video> 将<video> poster属性值设置为图像文件的路径。 在window检查条件的load事件中确定是否将<video>元素的.src设置为视频文件的路径。
<video poster="myimage.jpg"></video>
window.onload = function() {
if (/* conditions */ window.innerWidth > 480)
document.querySelector("video").src = "myvideo.mp4";
}