html5 video 视频页面内缓存 - 全量加载方法

本文介绍了HTML5 video元素的preload属性,用于控制视频预加载的行为,以提升用户体验。当设置为'auto'时,浏览器可能会仅预加载部分视频,而非全量。通过监听progress事件并主动播放、暂停视频,可以实现全量缓冲。另外,使用blobURL方法也可将视频全量缓存到本地,适合对视频操作和即时性要求较高的场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

preload

默认情况下我们实现一个简单的 H5 的播放器,只需要这么简单的代码就好:

    <video preload width="320" height="240" controls src="./static/videos/1.mp4"></video>

这个时候用户点击播放按钮就可以开始播放了。

但是为了更好的用户体验,我们有的时候需要预加载视频,比如有的视频可能是在用户产生某些交互进行显示播放的。这个时候我们优先想到的是 preload 属性。
此属性用于定义视频是否预加载。属性有三个可选择的值:nonemetadataauto。如果不使用此属性,默认为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
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值