阻止视频在移动设备的后台加载

Posted 2023-05-07

【中文标题】阻止视频在移动设备的后台加载

【英文标题】：Stop video from loading in background on mobile

【发布时间】：2017-10-14 12:59:45

【问题描述】：

我有一个只想在台式机上播放的视频标题，而在移动设备上有一个静态图像标题。我可以在移动设备上隐藏视频，看起来效果很好，但是视频仍在后台加载并减慢了页面加载速度。如何完全停止在移动设备上加载视频。

<video id="bgvid" class="hidden-xs ">    
  <source type="video/mp4" src="myvideo.mp4"></source>
</video>

<img  style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" />

【参考方案1】：

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

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

$(
  function() 
    const bgv = $('#bgvid');

    if (bgv.is(':visible')) 
      $('source', bgv).each(
        function() 
          const 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: 300px) 
  .hidden-xs 
    display: block;
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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 type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

或者，没有 jQuery：

window.addEventListener("load", function() 
  const bgv = document.getElementById("bgvid");

  // what jQuery checks under the hood
  const visible = bgv.offsetWidth ||
    bgv.offsetHeight ||
    bgv.getClientRects().length;

  if (visible) 
    const children = bgv.getElementsByTagName("source");

    for (let i = 0; i < children.length; ++i) 
      children[i].src = children[i].dataset.src;
    
  

  bgv.load();
);

.hidden-xs 
  display: none;


/* dummy criterion for demo purposes */

@media screen and (min-width: 300px) 
  .hidden-xs 
    display: block;
  

<video id="bgvid" class="hidden-xs" controls>
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

【参考方案2】：

将<video> poster 属性值设置为图像文件的路径。在load 的window 事件中检查条件以确定是否将<video> 元素的.src 设置为视频文件的路径。

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

window.onload = function() 
  if (/* conditions */ window.innerWidth > 480) 
    document.querySelector("video").src = "myvideo.mp4";

【讨论】：

此解决方案始终显示海报图像。

@HarryRobinsob 是的，海报图像一直显示到用户或javascript 开始播放视频。

【参考方案3】：

这个解决方案适合我。您可以将数字“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>

【讨论】：

感谢您发布此答案，但请注意，包含未经请求的商业广告的帖子可能会作为垃圾邮件被删除。有关更多信息，请参阅What is the exact definition of “spam” for Stack Overflow?。我现在已经把那部分删掉了。

【参考方案4】：

如果您想停止多个视频并在移动设备上使用后备 img 将它们静音，这应该会有所帮助

const video = document.querySelectorAll('video')
              video.forEach(data=>
                data.volume = 0 //mute video
                console.log(data);
                  if (window.innerWidth <= 768) 
                      data.autoplay=false;
                   else 
                      data.play();
                  
                )