关于视频缓冲条的问题
来源：4-8 video-javascript（5）
今天也要加了个油
2020-10-02 11:48:47
老师只讲了进度条，但是几乎每个在线的视频都有缓冲条。所以我觉得知道缓冲条的相关逻辑很有必要。就 imooc 来说，在 imooc 上看课程视频的时候，我发现点击播放按钮播放视频，缓冲条似乎是按需加载的，每次只往后面缓冲一小段。如果暂停了，就不再继续缓冲。这个过程，希望老师能简单讲解一下：从发送请求，到实现缓冲。
其他问题：
如果是按需加载视频（比如视频比较大或者视频在服务器上），那么 canplay 触发时，在未缓冲完整个视频的情况下，如何获取整个视频的 duration ？
通过对比video API中的 seeked 和 seeking ，有一定的区别，我发现 seeked 似乎带有一定的防抖 ，为什么要做出这种区别？
1回答
-
同学你好，问题解答如下：
1. 视频缓冲的功能是比较复杂的，它涉及到下载内容等操作，单纯的利用js不好实现。在video的事件中，与下载相关的只有onprogress 事件（浏览器下载指定的视频/音频时触发）以及loadeddata事件（监听视频下载），而且这两个事件的使用文档特别少，老师没有找到详细的使用说明和参数说明，所以缓冲条这个功能，还是靠后端同学来实现比较好，也可以查找一些大牛们封装好的插件来实现。
关于缓冲这个过程，老师可以大概给你提个思路供参考：
页面打开时，利用ajax向后端发送数据，后端返回给我们与视频相关的信息，比如视频的地址、视频的总时长等，然后我们将video标签的src属性动态渲染上，并开始下载视频，下载过程中，利用下载了多少大小的视频，来计算缓冲条的宽度，同时要监听视频的播放状态，如果视频处于暂停状态并且视频下载到了一定大小后，则终止下载，等待视频播放再继续开启下载。
2.按需加载时，可以让后端直接返回视频总时长，我们利用该时长即可。
3. seeked的防抖效果，主要是为了节省性能，即减少事件的触发次数就可以节省很多性能。
祝学习愉快！
0
相似问题