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

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

Use canplaythrough event.

当用户代理可以播放媒体时触发 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 后视频何时开始播放

check when video starts playing after populating src

javascript

html5-video