仅在桌面上显示 html5 视频答案

【问题标题】：show html5 videos only on desktop仅在桌面上显示 html5 视频
【发布时间】：2016-05-30 16:45:35
【问题描述】：

如果用户不在移动设备上，我有此代码填充源的 src 属性：

 if($.browser.mobile)
   {
       console.log("is mobile")
      // it is mobile browser
   }
   else
   {
     console.log("is desktop")
      // no mobile browser
      var sources = document.querySelectorAll('video#patient-video source');
     // Define the video object this source is contained inside
     var video = document.querySelector('video#patient-video');
     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();
     video.muted= "muted";
   }

为了检查它是否是移动浏览器，我使用了插件：

detectmobilebrowser.js

我的 HTML 如下：

 <video id="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
            <source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4">
            <source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm">
            <source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg">
          </video>

这适用于一个特定的视频，但我如何调整 Javscript 以便它对页面上的所有视频都一样。

【问题讨论】：

您可以使用媒体查询来检测浏览器的大小
@BenPhilipp 不需要 jquery foreach，OP 只需要使用一个类而不是一个 id
@RachelGallen 是的。或类型，或其他一些共同点——我所说的“类似”.each() 不是“他们需要 jQuery”，我只是在谈论收集目标对象的一般方法；重点不是移动/桌面问题，而是收藏问题。我确实忽略了一个事实，即他们确实已经在建立一个集合，因为它正在寻找一个 ID - 道歉

标签： javascript jquery html video html5-video

【解决方案1】：

如果你使用多个同名的视频，你应该使用一个类而不是一个 id

if($.browser.mobile)
   {
       console.log("is mobile")
      // it is mobile browser
   }
   else
   {
     console.log("is desktop")
      // no mobile browser
      var sources = document.querySelectorAll('video.patient-video source');
     // Define the video object this source is contained inside
     var video = document.querySelector('video.patient-video');
     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();
     video.muted= "muted";
   }

注意点而不是井号标签。您甚至不需要之前的“视频”。不要忘记相应地更新您的 html

应该是

<video class="patient-video" width="100%" preload="none" poster="../../assets/img/patient-home-1600.jpg" autoplay loop>
            <source data-src="../../assets/video/patient-home-video-comp.mp4" src="" type="video/mp4">
            <source data-src="../../assets/video/patient-home-video-comp.webm" src="" type="video/webm">
            <source data-src="../../assets/video/patient-home-video-comp.ogv" src="" type="video/ogg">
          </video>

【讨论】：

如果您的 CSS 中有 #patient-video，请将其修改为 .patient-video{etc}