这是我参与新手入门的第2篇文章

js+video标签实现一个自定义播放器

video一些常见的方法和属性。

方法&属性	描述
play()	播放
pause()	暂停
duration	视频总时长
currentTime	视频当前播放的时长
volume	音量
width	宽度
height	高度
src	属性规定要播放的视频的 URL
controls	是否显示自带的控件，比如播放按钮等
autoplay	是否自动播放
preload	是否在页面加载后载入视频，如果设置了 autoplay 属性，则忽略该属性。
loop	是否循坏播放
poster	视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
loop	是否循坏播放
muted	静音

正文

html+css部分

先来简单实现一下播放器的页面部分吧！！！

要实现的页面效果：

如我们所见，页面主要分为video播放器、进度条以及按钮三部分。

html代码：

<div id="wrap">
        <!-- 播放器 -->
	<video id="video" loop="loop" poster="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/816c13440f694e779d1f6f35e1f88788~tplv-k3u1fbpfcp-watermark.image">
			您的浏览器不支持 video 视频播放
			<source src="https://juejin.cn/post/video/lol.mp4">
			<source src="https://juejin.cn/post/video/lol.ogg">
	</video>
        <!-- 进度条 -->
	<div id="progress">
		<p id="bar"></p>
	</div>
        <!-- 按钮 -->
	<div class="clearfix">
		<button id="play">播放</button>
		<button id="pause">暂停</button>
		<button id="volume1">音量加</button>
		<button id="volume2">音量减</button>
		<button id="currentTime1">快进10s</button>
		<button id="currentTime2">快退10s</button>
		<button id="playbackRate1">加速播放</button>
		<button id="playbackRate2">减速播放</button>
		<button id="big">大屏幕</button>
		<button id="cen">中屏幕</button>
		<button id="lit">小屏幕</button>
	</div>
</div>
复制代码

css代码

*{margin: 0; padding: 0;}
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {*zoom: 1;}
#wrap{width: 600px; margin: 50px auto;}
#video{width: 100%;}
button{width: 69px; height: 30px; border: none; background: #f9c; float: left; border-radius: 5px; margin: 3px;}
button:hover{position: relative; top: 1px; left: 1px; background: red;}
#progress{width: 100%; height: 13px; background: gray; margin-top: -3px;}
#bar{width:0; height: 13px; background: red;}
复制代码

js部分

页面部分完成了，那就是我们重点的js啦！！！
简单分析下我们需要实现的逻辑有哪些???然后一个一个来实现它吧！！！
因为我们使用的都是原生的js写的，所以我们写两个用的上公共函数,方便我们使用。

公共函数

//通过id找对象函数
function $(id){
	return document.getElementById(id)
};
// 获取元素样式函数
function getStyle(obj,attr){
        var css=obj.currentStyle || getComputedStyle(obj,null);
        return css[attr]
}
复制代码

接着就一步一步来实现功能啦！！！
进度条
进度条是个复杂点,理清思路，用定时器来实现，详情看注释

var video=$('video');
var duration=video.duration; //视频总时长;
// 进度条运动函数
var bar=$('bar');
var timer=null;
function run(){
        var currentTime=video.currentTime; //视频当前播放的时长;
        bar.style.width=currentTime/duration*100+'%';//进度条进度
}
// 点击改变进度条进度,控制视频播放进度;
var progress=$('progress');
progress.addEventListener('click',progress_click,false);
function progress_click(ev){
        var oEvent=ev ||event ;//兼容处理;
        var px=oEvent.clientX; //鼠标点击位置的横坐标位置;
        var pl=progress.offsetLeft;//div到浏览器左边的距离;
        var bwidth=px-pl; //鼠标点击位置进度条的长度;
        var pwidth=parseInt(getStyle(progress,'width'));
        bar.style.width=bwidth/pwidth*100+'%'; //进度条进度
        video.currentTime=duration*(bwidth/pwidth);//视频播放进度
}
复制代码

播放与暂停
播放、暂停使用的是play(),pause()方法，配合进度条的定时器就可以随时播放暂停啦

// 播放
var play=$('play');
play.addEventListener('click',play_click,false);
function play_click(){
        video.play();
        timer=setInterval(run,1000) //开启定时器
};

// 暂停
var pause=$('pause');
pause.addEventListener('click',pause_click,false);
function pause_click(){
        video.pause();
        clearInterval(timer) //清除定时器
};
复制代码

音量加减
音量加减使用的是volume属性做加减运算,由于volume音量默认的最大值为1，最小值为0，以0.2为单位做加减，因此需要注意解决js小数运算的精度问题，可用toFixed()的方法做处理。

// 音量加
var volume1=$('volume1');
volume1.addEventListener('click',volume1_click,false);
function volume1_click(){
        if(video.volume>=1){
                alert('音量已最大');
                return
        }
        video.volume+=0.2;
        video.volume=video.volume.toFixed(2);//解决小数运算精度问题
};

// 音量减
var volume2=$('volume2');
volume2.addEventListener('click',volume2_click,false);
function volume2_click(){
        if(video.volume<=0){
                alert('音量已为零');
                return
        }
        video.volume-=0.2;
        video.volume=video.volume.toFixed(2);//解决小数运算精度问题
}
复制代码

快进快退
快进快退使用的是currentTime属性做加减运算,最大值为视频总时长,最小值为0,以10为单位做加减,如果以小数位单位做加减,注意处理下精度问题。

// 快进
var currentTime1=$('currentTime1');
currentTime1.addEventListener('click',currentTime1_click,false);
function currentTime1_click(){
        video.currentTime+=10;
}

// 快退
var currentTime2=$('currentTime2');
currentTime2.addEventListener('click',currentTime2_click,false);
function currentTime2_click(){
        video.currentTime-=10;
}	
复制代码

加速减速
加速减速使用的是playbackRate属性做加减运算,默认值为1倍正常速度,上下限值就自己看着给吧,菜鸟教程给出的例值是这样的，如果以小数位单位做加减,注意处理下精度问题。

实际测试当倍速为0了，播放是暂停，点击加速可继续播放，直接点播放按钮却不能继续播放，而且倍速无法是负数，会报错！！！

// 加速
var playbackRate1=$('playbackRate1');
playbackRate1.addEventListener('click',playbackRate1_click,false);
function playbackRate1_click(){
        video.playbackRate+=0.5;
        video.playbackRate=video.playbackRate.toFixed(2);//解决小数运算精度问题
}

// 减速
var playbackRate2=$('playbackRate2');
playbackRate2.addEventListener('click',playbackRate2_click,false);
function playbackRate2_click(){
        video.playbackRate-=0.5;
        video.playbackRate=video.playbackRate.toFixed(2);//解决小数运算精度问题
}
复制代码

大中小屏

大中小屏这操作主要改变最外层wrap容器的宽度就可以实现了，根据自己喜好玩玩就好啦

// 播放屏幕大小
$('big').onclick=function(){
        $('wrap').style.width='900px';
}
$('cen').onclick=function(){
        $('wrap').style.width='600px';
}
$('lit').onclick=function(){
        $('wrap').style.width='300px';
}
复制代码

完整js代码

// 通过id找对象函数
function $(id){
        return document.getElementById(id)
};
// 获取元素样式函数
function getStyle(obj,attr){
        var css=obj.currentStyle || getComputedStyle(obj,null);
        return css[attr]
}
// 加载事件
window.addEventListener('load',inital,false);
function inital(){
        var video=$('video');
        var duration=video.duration; //视频总时长;
        // 进度条运动函数
        var bar=$('bar');
        var timer=null;
        function run(){
                var currentTime=video.currentTime; //视频当前播放的时长;
                bar.style.width=currentTime/duration*100+'%';//进度百分百
        }
        // 点击改变进度条进度,控制视频播放进度;
        var progress=$('progress');
        progress.addEventListener('click',progress_click,false);
        function progress_click(ev){
                var oEvent=ev ||event ;//兼容处理;
                var px=oEvent.clientX; //鼠标点击位置的横坐标位置;
                var pl=progress.offsetLeft;//div到浏览器左边的距离;
                var bwidth=px-pl; //鼠标点击位置进度条的长度;
                var pwidth=parseInt(getStyle(progress,'width'));
                bar.style.width=bwidth/pwidth*100+'%'; //进度条进度
                video.currentTime=duration*(bwidth/pwidth);//视频播放进度
        }
        // 播放
        var play=$('play');
        play.addEventListener('click',play_click,false);
        function play_click(){
                video.play();
                timer=setInterval(run,1000) //开启定时器
        };

        // 暂停
        var pause=$('pause');
        pause.addEventListener('click',pause_click,false);
        function pause_click(){
                video.pause();
                clearInterval(timer) //清除定时器
        };

        // 音量加
        var volume1=$('volume1');
        volume1.addEventListener('click',volume1_click,false);
        function volume1_click(){
                if(video.volume>=1){
                        alert('音量已最大');
                        return
                }
                video.volume+=0.2;
                video.volume=video.volume.toFixed(2);//解决小数运算精度问题
        };

        // 音量减
        var volume2=$('volume2');
        volume2.addEventListener('click',volume2_click,false);
        function volume2_click(){
                if(video.volume<=0){
                        alert('音量已为零');
                        return
                }
                video.volume-=0.2;
                video.volume=video.volume.toFixed(2);//解决小数运算精度问题
        }

        // 快进
        var currentTime1=$('currentTime1');
        currentTime1.addEventListener('click',currentTime1_click,false);
        function currentTime1_click(){
                video.currentTime+=10;
        }

        // 快退
        var currentTime2=$('currentTime2');
        currentTime2.addEventListener('click',currentTime2_click,false);
        function currentTime2_click(){
                video.currentTime-=10;
        }	

        // 加速
        var playbackRate1=$('playbackRate1');
        playbackRate1.addEventListener('click',playbackRate1_click,false);
        function playbackRate1_click(){
                video.playbackRate+=0.5;
                video.playbackRate=video.playbackRate.toFixed(2);//解决小数运算精度问题
        }

        // 减速
        var playbackRate2=$('playbackRate2');
        playbackRate2.addEventListener('click',playbackRate2_click,false);
        function playbackRate2_click(){
                video.playbackRate-=0.5;
                video.playbackRate=video.playbackRate.toFixed(2);//解决小数运算精度问题
        }

        // 播放屏幕大小
        $('big').onclick=function(){
                $('wrap').style.width='900px';
        }
        $('cen').onclick=function(){
                $('wrap').style.width='600px';
        }
        $('lit').onclick=function(){
                $('wrap').style.width='300px';
        }
}
复制代码