利用video 自制播放器

先来演示一下效果

实现的小功能，播放，暂停，静音，音量调节，播放进度，全屏

先看一下代码结构

代码结构

没有css代码，里面有一个input  的range标签  value初始化为0

下面就是js代码

先来获取每个按钮节点

获取元素节点

然第一个是播放按钮，播放按钮是点击之后。视频播放video.play(），然后让input的value变为暂停，设置一个定时器，调用进度函数，每0.1秒进行video.currentTime的赋值，让proRange.value  = video.currentTime,这样input就会慢慢的向前，让video.duration,当前视频的长度，proRange.max = video.duration;这样input就有了最大长度。当video.ended == true时，播放完毕，改变input的value值，清除定时器。点击暂停的时候，先video.pause(),然后清除定时器，改变value。

播放按钮

播放进度

onchange事件

静音按钮，就是先声明一个变l量vol来保存当前音量的值，然后点击静音按钮时，改变value，变为取消按钮，让video.muted = true;让volumeRange.value = vol;,再让volumeRange.value = 0 ；就是让静音按钮回到最左边，，再点击的话，就是volumeRange.value = vol；回到原来的状态。

静音按钮

全屏和音量的换算，  是一个audio的一个方法 webkitRequestFullScreen()；volume  设置或返回音频和视频当前音量 0 ~1，，

全屏和音量的换算

这个是全屏的兼容

讲个笑话：

大妈上了空调车投了一块钱。司机说：“空调车两块！”。

大妈答：“是凉快”。

司机又说：“投两块”!

大妈笑说：“不光头凉快，浑身都凉快”，说完往后头走。

司机说:“我告诉你钱投两块”。

大妈说:“我觉得后头人少更凉快”。

司机无语，一车人笑倒了！沟通不到位，努力全白费

哈哈哈哈哈哈！冷吗？