HTML5视频标签优化

时间:2017-11-08 11:16:53

标签: javascript css html5 angular html5-video

我有Angular应用程序,它是使用node / Express服务器构建和提供的。

我使用的是用户可以观看的视频

<video width="100%" height="344" controls controlsList="nodownload" preload="metadata" autoplay>
   <source src="/assets/video/digital.mp4" type="video/mp4">            
</video>

工作正常。但在慢速互联网上它播放速度非常慢。我想知道在这里可以做些什么,这样用户即使在慢速上网也不会感到沮丧。

1 个答案:

答案 0 :(得分:2)

而不是 preload =“元数据”尝试预加载:“自动”

  

auto:表示即使可以下载整个视频文件   用户不应该使用它。

但是如上所述,preload属性并不总是可靠..

有4个解决方案in this blog&amp;最可靠的是

  

解决方案#4,ajax和bloburl(工作)

var req = new XMLHttpRequest();
req.open('GET', 'video.mp4', true);
req.responseType = 'blob';

req.onload = function() {
   // Onload is triggered even on 404
   // so we need to check the status code
   if (this.status === 200) {
      var videoBlob = this.response;
      var vid = URL.createObjectURL(videoBlob); // IE10+
      // Video is now downloaded
      // and we can set it as source on the video element
      video.src = vid;
   }
}
req.onerror = function() {
   // Error
}

req.send();