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

Jason不得
6,341 阅读4分钟

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

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

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

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

正文

html+css部分

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

要实现的页面效果： image.png
如我们所见，页面主要分为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="./video/lol.mp4">
			<source src="./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写的，所以我们写两个用的上公共函数,方便我们使用。

属性方法
auto自动
自动
自动

公共函数

//通过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倍正常速度,上下限值就自己看着给吧,菜鸟教程给出的例值是这样的，如果以小数位单位做加减,注意处理下精度问题。

image.png
实际测试当倍速为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';
        }
}

总结

新手入门第2篇文章完成！感动，相比第一篇，个人感觉还是有进步啦，感谢掘金，这个主题真的好喜欢，以后就专门用这个好了，哈哈。。。
此文章主要学习的是原生js的写法与video标签的属性，希望能帮助一些初学者。

感觉大家的阅读，希望2021下半年大家都能实现自己的目标！！！

avatar
文章
阅读
粉丝