javascript中使用video实现视频的缓冲,加载与下载,获取视频的时长

5 篇文章 0 订阅
1 篇文章 0 订阅

这是本人的第一个博客,今天主要说明video的用的较少的一些功能,像play,paused这些属性或者play(),pause()这些方法不在本章的讲解内容内
var video = document.getElementById(‘video’)

获取video的视频时长

获取视频时长是最基本也最简单的,通过video.duration,以秒为单位,但该属性放在任何监听事件之前并不能拿到真实的值,需要在onloadedmetadata(加载完元数据),onloadeddata(第一帧已经加载完成)等这些时间之后才能获取到真实的值

获取视频的缓冲时间

在观看视频或者听一些音乐的时候我们一般都能看到三个时间线数据,一个是总时长,一个是正在播放时间,还有一个是以缓冲时长,这个已缓冲时长是在下载时产生的,我们监听视频的下载是通过onprogress事件,video.buffered.end(0)则可以拿到到目前为止已经缓冲了的总时长,video.buffered拿到的是一个时间timeRange对象,有start方法跟end方法,分别获取拿到的时间范围的开始时间跟结束时间。

监听视频的加载

再次之前我见有的人用的判断视频或者音频加载是onloaded,表示是否已经加载完成,这种对于较小的文件影响不大,但对于视频来说是不可能按照这种方式实现的,所以我们一般采用oncanplaythrough,即readystate状态为3时,就可以顺畅播放,不会轻易造成卡顿,也可以使用oncanplay事件,即readystate状态为2时,只是可以进行播放,效果未必流畅

获取视频的实时时长

由于播放内容是实时的也是我们不可预估的,所以必须实时通过video.currentTime属性去获取,但是这个currentTime又是在什么情况下获取呢,这里用到一个ontimeupdate事件,顾名思义就是放时间发生更改之后去获取,而这个事件的更新事件是0.25s,在实际获取时我们可能并不需要这么高频率的去获取,一般都是在1s左右的时候去重新获取并赋值,这是便用到了定时器。

今天只是第一次说明,所以暂时就不贴代码了,之后会把video完整的整理一遍

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值