在HTML5以前，在网页上观看视频一般都需要浏览器安装Flash播放插件，使用Flash通过\
当然，想要做出自己想要的更加完美的视频播放器，还是要了解很多参数的，下面就来详细记录一下video相关的属性和方法，以及如何打造自己的video播放器。
video标签的属性
width video标签宽度
height video标签高度
poster 视频封面
src 视频播放地址的url
preload 预加载 页面加载时是否同时加载音视频
autoplay 自动播放 加载后自动播放
loop 循环播放
controls 控制条 显示播放控件
video API属性
duration 返回视频的总时长（单位：s）
currentTime 当前播放时间（单位：s）
loop 是否循环播放
muted 是否静音
volume 音量值 范围[0,1]
paused 是否暂停
played 当前已经播放的时间范围
startTime 一般为0
error 返回播放的错误状态
initialTime 返回初始播放的位置
buffered 返回缓存的时间范围
currentSrc 返回当前媒体的URL
networkState 返回当前网络状态
playbackRate 播放的倍速（加速、减速播放）
video 方法
play() 播放视频
pause() 暂停视频
load() 将全部属性恢复到默认值，重新开始状态
canPlayType() 判断是都支持当前类型的视频格式
video.muted=true; //静音
video 事件
loadedmetadata //成功获取资源长度
timeupdate //播放时间改变
播放器
预览图
功能介绍
视频
通过video src属性，添加本地或者在线视频地址；
视频类型：普通+m3u8
播放
默认状态：暂停，表示视频未播放；
点击则为播放，表示视频正在播放；
可切换
视频进度条
随着视频播放，进度条已播放和进度控制点会自动同步。
鼠标点击视频进度条上任意位置
鼠标点击进度条上任意位置，已播放和进度控制点会随之移动到点击处，同时，已播放视频时间改变为点击处视频对应时间点；
若点击之前，视频为暂停状态，则点击后视频为播放状态。
鼠标拖动进度控制点位置
视频进度根据进度控制点拖动的范围随之变化，相应的视频时间也会对应变化。
时间
正在播放处时间 / 视频总长
注：暂时只考虑了短视频，00:00 (分：秒)，后续会更新小时
音量
点击音量图标
默认状态为非静音，声音为100；
点击则为静音，声音为0；
可切换
点击音量设置条上任意位置
若之前是静音状态：先取消静音设置，再根据鼠标点击位置，计算对应音量显示在数字位置，同时音量进度颜色条以及音量控制点移至点击位置；
若之前是非静音状态：直接根据鼠标点击位置，进行后续步骤即可。
鼠标拖动音量控制点位置：
音量进度条根据音量控制点拖动的范围随之变化，相应的显示的音量值也对应变化。
全屏
默认状态为非全屏
点击则进入全屏
可切换