Javascript 停止在手机后台加载视频

我有一个视频头，我只想在桌面上播放，在手机上有一个静态图像头。我可以在手机上隐藏视频，看起来效果不错，但视频仍在后台加载，页面加载速度变慢。如何阻止视频在手机上加载

<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" />

将

海报属性值设置为图像文件的路径。在

加载
窗口的事件时
检查条件以确定是否将
元素的
.src
设置为视频文件的路径

<video poster="myimage.jpg"></video>

假设您通过CSS或在早期的JS代码中设置可见性，您可以执行以下操作：

在视频元素中包含
data src
属性，而不是
src
。如果不需要，则无需加载src
如果视频可见，请将
数据src
复制到
src
现在在
video
元素上调用
.load（）
，以获取新值

$(
函数（）{
常量bgv=$（“#bgvid”）；
如果（bgv.is（':visible'））{
$（“来源”，bgv）。每个(
函数（）{
const el=$（本）；
el.attr（'src'，el.data（'src'）；
}
);
bgv[0]。加载（）；
}
}
)
.hidden xs{
显示：无；
}
/*用于演示目的的虚拟标准*/
@媒体屏幕和屏幕（最小宽度：300px）{
.隐藏的X{
显示：块；
}
}
此解决方案适合我。您可以将数字“767”更改为不希望在其上显示视频的设备的任何最大像素宽度。请记住，这将删除移动设备上的所有视频。但是，您也可以使用视频标记的类或ID；您只需要更改remove（）的脚本

标题中的脚本代码：

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
 $(document).ready(function() {
   if($(window).width() <= 767){

    $( "video" ).remove();
   }
});

</script>

<div class="fullscreen-bg">
    <video loop muted autoplay class="fullscreen-bg__video">
            <source src="http://yoururl.com/video.mp4" type="video/mp4">
        </video>

</div>


$（文档）.ready（函数（）{
if（$（窗口）.width（）此解决方案始终显示海报图像。@HarryRobinsob是的，海报图像将一直显示，直到用户或
javascript
开始播放视频为止。感谢您发布此答案，但请注意，包含未经请求的商业广告的帖子可能会被作为垃圾邮件删除。有关详细信息，请参阅。我已将该部分编辑掉。
<div class="fullscreen-bg">
    <video loop muted autoplay class="fullscreen-bg__video">
            <source src="http://yoururl.com/video.mp4" type="video/mp4">
        </video>

</div>