摘要：此属性用于定义视频是否预加载。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。
preload
默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好：
这个时候用户点击播放按钮就可以开始播放了。
但是为了更好的用户体验，我们有的时候需要预加载视频，比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。
此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
Auto：全部预加载。
但是我们查看视频的请求，我们发现其实只预加载了一部分。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。
video 提供了 包括 play , pause , progress 等事件。当播放器处在不同的状态时候进行触发。其中 progress 会在视频进行下载的时候进行触发。
video.addEventListener("progress", function() {
// When buffer is 1 whole video is buffered
if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) === 1) {
// Entire video is downloaded
}
}, false);
通过 progress 事件我们可以确保我们的视频都能够缓冲完成。但是现代的浏览器都只会进行局部内容的下载，因为浏览器认为这段内容足够完成成功播放。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。
使用 bloburl其实我们可以使用 ajax 去进行资源的请求，如果响应的类型是 blob 的话，我们可以创建一个 object url 的。而此时这个 url 的生命周期取决于 document 创建开始。
// 通过blob预加载 src为原视频的视频地址
blob_load = (src) => {
const req = new XMLHttpRequest();
req.open("GET", src, 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) {
const videoBlob = this.response;
const blobSrc = URL.createObjectURL(videoBlob); // IE10+
// Video is now downloaded
// and we can set it as source on the video element
// video.src = blobSrc ;
console.log(blobSrc, "blobSrc加载完毕");
}
};
req.onerror = function () {
// Error
};
req.send();
};
测试结果
通过图片发现video的src发生了变化，但是播放的内容都是一样的。
通过bloburl的方式我们可以将整个视频缓存在本地，然后指定视频的播放位置也能快速播放。对于有操作视频的并且及时性要求比较高的小伙伴可以试试。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/34603.html
摘要：此属性用于定义视频是否预加载。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。 preload 默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，...
摘要：此属性用于定义视频是否预加载。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。 preload 默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，...
摘要：此属性用于定义视频是否预加载。它并没有自动进行全部视频内容的下载，这样的策略实际有利于节约用户宽带造成不必要的请求。因此，我们可以通过播放视频一会在暂停用于视频缓冲的方式在后台进行视频加载。 preload 默认情况下我们实现一个简单的 H5 的播放器，只需要这么简单的代码就好： 这个时候用户点击播放按钮就可以开始播放了。 但是为了更好的用户体验，我们有的时候需要预加载视频，...
摘要：如果属性未指定，那么在第一帧可用之前什么都不会展示之后第一帧就像海报帧一样展示该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。支持的资源可在元素中被重用，而不会被污染。 为了监控移动端视频播放的情况，研究了一下 html5 标签的属性与事件触发，及其在各系统和各个浏览器的兼容情况 属性与事件 理解清楚属性和事件，才能更好的使用 video ，达到预期的效果，更好的检测...
摘要：定义字符中文注音或字符的解释或发音。表单域我们都知道标签用于为用户输入创建表单。在中表单域添加了两个新的属性规定是否启用表单的自动完成功能，默认。通过属性和表单域的可以将输入表单绑定到表单域中。 showImg(http://ww1.sinaimg.cn/large/007kscFEgy1fxgnw4hajoj31400p0q4d.jpg); 1. 认识HTML5 HTML5并不仅仅...
阅读 826·2021-11-22 15:33
阅读 3123·2021-11-08 13:20
阅读 1000·2021-09-22 10:55
阅读 1923·2019-08-29 11:08
阅读 3166·2019-08-28 17:46
阅读 618·2019-08-26 12:24
阅读 2912·2019-08-23 17:15
阅读 2039·2019-08-23 16:12
