Question

我使用以下代码检查用户是在桌面还是移动设备上，如果在桌面上，则会填充视频源的src=""属性。一切都很好。填充src属性后，我想在显示之前检查视频是否已加载。有没有办法做到这一点？

谢谢！

JS

 //video
    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";
      $(".main-area--cris-pro").addClass("loaded")
    }

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

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>

Answer 1

使用canplaythrough事件。

当用户代理可以播放媒体时会触发canplaythrough事件，并估计已加载足够的数据以播放媒体直至其结束而无需停止进一步缓冲内容。

var sources = document.querySelectorAll('video#patient-video source');
var video = document.querySelector('video#patient-video');
for (var i = 0; i < sources.length; i++) {
  sources[i].setAttribute('src', sources[i].getAttribute('data-src'));
}
video.muted = true;//Set boolean value
video.addEventListener('canplaythrough', function() {
  alert('Video Loaded!');
  video.muted = false;
  $(".main-area--cris-pro").addClass("loaded");
});

在填充src后检查视频何时开始播放

1 个答案: