前言:video标签不仅仅可以实现一段网络视频的播放,同时也开放了多媒体操作相关的事件,所以我们可以通过原生的video标签,来实现一个简单的网页版自定义的播放器
导语:
1.html结构;
2.video标签的事件;
3.利用事件自定义播放器功能;
一、html结构:
<video class="testVideo" preload="auto">
<source src="videoURL" type="video/mp4"/>
</video>
二、多媒体事件
//获取video元素,多媒体事件绑定在多媒体元素下
const Media = document.queryselector('.testVideo');
//初次加载视频
Media.onloadeddata = e => {
// duration 是视频的总时长,这里取时长比较稳定
const { target:{ duration } } = e;
}
//视频播放过程中持续触发
Media.ontimeupdate = e => {
// currentTime 是视频播放到的当前时间
// 因为该事件播放过程中实时触发,所以取当前时间可以自定义时间轴
const { target:{ currentTime }} = e;
}
//视频加载出现错误时触发
Media.onerror = e => {
// 进行容错处理
}
// 以上是非常常用的多媒体事件,下面为了简洁,将简单的列出其余的事件(不是函数的形式)
// 摘录于MDN官网
Media.onabort; // 当播放被终止时
Media.oncanplay; // 在媒体数据已经有足够的数据,可供播放时
Media.oncanplaythrough; //在媒体的readyState变为CAN_PLAY_THROUGH时触发
Media.ondurationchange; //元信息已载入或以改变,表明媒体的长度发生了改变,例如,在媒体已被加载足够长度从而得知总长度时会触发这个事件
Media.onemptied; // 媒体被清空时
Media.onended; // 播放结束时
Media.onloadedmetadata; // 媒体的元数据已经加载完毕,现在所有的属性包含了它们应有的有效信息
Media.onloadstart; // 在媒体开始加载时触发,此时没有加载
Media.onpause; // 播放暂停时触发
Media.onplay; // 在媒体回放被暂停后再次开始时触发,即,再一次暂停事件后恢复媒体回放
Media.onplaying; // 在媒体开始播放时触发
Media.onprogress; // 告知媒体相关部分的下载进度时,周期性触发。
Media.onratechange; // 在回放速率变化时触发。
Media.onseeked; // 在跳跃完成时触发
Media.onseeking; // 在跳跃操作开始时触发
Media.onstalled; // 在尝试获取媒体数据,但媒体数据不可用时触发
Media.onsuspend; // 在媒体资源加载终止时触发
Media.onwaiting; // 在一个待执行的操作(如回放)因等待另一个操作(如跳跃或下载)被延迟时触发
三、利用多媒体事件,自定义播放器时间轴功能
1、点击播放按钮播放/暂停
//设置一个播放开关,控制播放按钮的图标等变化
let flag = true
const playVideo = () => {
// 当视频处于暂停或者停止时,点击按钮视频播放,同时关闭播放开关
if(Media.paused || Media.ended){
Media.play();
flag = false;
// 否则点击按钮,音频暂停,并打开开关
}else{
Media.pause();
flag = true;
}
}
2、拖动时间轴刻度,更改播放进度
此处需要获取拖动时间轴对应的时间,在react项目中,可以参考ant Design中的滑动输入条onchange事件的效果;
因为时间轴具体实现与本教程关系不大,所以我们这里假设时间轴是用ant Design中的滑动输入条来实现的
onchange = currentTime => {
//注意通过Media事件或者属性取到的时间,单位都是秒,实际操作时,一般用毫秒,所以要转换一下
//Media.currentTime 可读写,写入一个单位为秒的时间,播放进度可发生跳转
Media.currentTime = currentTime * 1000;
}
3、播放速率
const setRate = (rate) => {
Media.playbackRate = rate;
}
4、循环播放
const setLoop = (loopflag) => {
Media.loop = loopflag;
}
5、音量控制
音量大小
Media.volume
是否静音
Media.muted
以上是常用的自定义video播放器相关的事件用法,可以根据自己的需要组装开发
详细资料教程推荐:
MDN官网:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Media_events
大神帖子:https://cloud.tencent.com/developer/article/1462727