sourcebuffer.onupdateend 回调中 video.buffered.start 更新原理

大肠包小肠|

已于 2023-10-17 10:54:56 修改

阅读量795

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端

于 2023-06-16 15:13:05 首次发布

本文链接：https://blog.csdn.net/klylove/article/details/131247024

文章详细介绍了HTML5视频播放器中的buffered属性和SourceBuffer的onupdateend事件，阐述了如何通过这两个特性监控视频缓冲区的状态。当新的视频数据添加到缓冲区，onupdateend事件触发，buffered的start和end值更新，反映缓冲区的时间范围。这些信息用于优化播放器性能和用户体验，比如更新进度条以显示当前缓冲状态。

在使用 HTML5 视频播放器时，buffered 属性用于获取视频缓冲区的范围，而 SourceBuffer 的 onupdateend 事件用于通知客户端新的视频数据已添加到缓冲区。当 onupdateend 事件被触发并且新的视频数据被添加到缓冲区中时，buffered 属性的值会随之更改。

在该事件的回调函数中，可以通过 buffered 属性的 start 和 end 值来获取视频当前缓冲区的时间范围。start 的值代表缓冲区的起始时间，而 end 的值代表缓冲区的结束时间。这两个值都以秒为单位。

当新的视频数据被添加到缓冲区时，buffered 的范围会扩展以包含新添加的视频数据。具体来说，在使用 SourceBuffer.appendBuffer() 将数据添加到缓冲区之后，onupdateend 事件将被触发，并且 buffered.end 的值将更新为缓冲区中所有数据的结束时间。

在 buffered 值发生变化后，视频播放器可以使用这些值来确定可播放的视频段和缓冲区的大小，以优化播放器的表现和用户体验。

需要注意的是，由于视频数据被动态地添加到缓冲区中，buffered 值可能会随着时间而变化。因此，在播放器的实现过程中，应该使用这些值来动态地更新进度条和其他用户界面元素，从而及时反映出当前视频的缓冲状态。