H5原生video标签相关事件，自定义时间轴功能

前言：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