HTML5视频（自定义视频播放器源码）
程序员文章站
2022-06-23 22:30:06
video对象 兼容性写法 vide ......
video对象
兼容性写法
<video controls>
<source src="data/demo.ovg">
<source src="data/demo.mp4">
<source src="data/demo.webm">
您的浏览器不支持，请升级您的浏览器
</video>
video 标签 width height autoplay muted
poster带有预览图（海报图片）的视频播放器
<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>
选中video标签
var videonode = document.getelementbyid('myvideo');
src控制视频的来源
videonode.src = 'data/demo.ogv';
手动设置控件 controls
videonode.controls = true;
设置视频音量
videonode.volume = 0.5;
currenttime当前播放时间
快进效果
gogogo.onclick = function(){
videonode.currenttime = videonode.currenttime + 3;
};
暂停 pause()
stopnode.onclick = function(){
videonode.pause();
};
播放play()
playnode.onclick = function(){
videonode.play();
};
load 刷新播放器的事件
reloadnode.onclick = function(){
videonode.src = 'data/demo.mp4';
videonode.load();
};
canplay 视频已经加载好 可以开始播放了
videonode.addeventlistener('canplay',function(){
console.log('视频已经加载好 可以开始播放了');
});
requestfullscreen 让video标签变成全屏
videonode.webkitrequestfullscreen();
videonode.mozrequestfullscreen();
fullscreennode.onclick = function(){
if(videonode.webkitrequestfullscreen){
videonode.webkitrequestfullscreen();
}
else if(videonode.mozrequestfullscreen){
videonode.mozrequestfullscreen();
}
};
volumechange 当音量更改时
videonode.onvolumechange = function(){
console.log('volumechange');
};
声音随机更改
volumenode.onclick = function(){
videonode.volume = math.random();
};
seeking 当用户开始拖动进度条时 就会触发的事件
var seekingnum = 0;
videonode.onseeking = function(){
console.log('seeking...');
seekingnum++;
seeking.innerhtml = seekingnum;
};
seeked 当用户对视频的进度条并且已经完成操作时会触发的事件
var seekednum = 0;
videonode.onseeked = function(){
console.log('seeked...');
seekednum++;
seeked.innerhtml = seekednum;
};
timeupdate监听视频播放的状态
videonode.addeventlistener('timeupdate',function(){
// 总时长，以分钟：秒的形式显示
let alltime = parseint(videonode.duration/60)+':'+parseint(videonode.duration%60);
// 当前时间，以分钟：秒的形式显示
let nowtime = parseint(videonode.currenttime/60)+':'+parseint(videonode.currenttime%60);
timenode.innerhtml = nowtime+'/'+alltime;
})
readystate 视频的准备信息
console.log(videonode.readystate);
settimeout(function(){
console.log(videonode.readystate);
},500);
playbackrate 查看或设置视频的一个播放速度
console.log(videonode.playbackrate)
rate设置倍速
//rate设置0.5倍速
ratenode.children[0].onclick = function(){
videonode.playbackrate = 0.5;
};
//rate设置1倍速
ratenode.children[1].onclick = function(){
videonode.playbackrate = 1;
};
//rate设置2倍速
ratenode.children[2].onclick = function(){
videonode.playbackrate = 2;
};
loop的设置
loopnode.onclick = function(){
if(videonode.loop == false){
this.innerhtml = '循环';
videonode.loop = true;
}
else{
this.innerhtml = '不循环';
videonode.loop = false;
}
};
src返回的数据
console.log('src='+videonode.src);
currentsrc返回的数据
console.log('currentsrc='+videonode.currentsrc);
监听ended事件
videonode.addeventlistener('ended',function(){
console.log('视频播放结束了');
videonode.play();
})
查看视频的网络状态
console.log(videonode.networkstate)
手动设置控件 controls
videonode.controls = true;
手动设置静音 muted
videonode.muted = true;
自定义视频播放器
放图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.outernode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;}
.outernode .videonode{
width: 540px;height: 305px;float: left;
background: black;
}
.outernode .controlsnode{
width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.gif) repeat-x;
}
.outernode .controlsnode .playnode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(images/playnode.png) no-repeat;cursor: pointer;
}
.outernode .controlsnode .pausenode{
float: left;width: 15px;height: 17px;margin: 6px 0 0 14px;
background: url(images/pause.png) no-repeat;cursor: pointer;
}
.outernode .controlsnode .loadnode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;}
.outernode .controlsnode .loadnode .linenode{
width: 0%;height: 7px;position: absolute;left: 0;top: 1px;
background: url(images/line_bg.png) repeat-x;
}
.outernode .controlsnode .loadnode .linenode .lineright{
width: 2px;height: 100%;position: absolute;right: 0;top: 0;
background: url(images/line_r_bg.png) no-repeat;
}
.outernode .controlsnode .loadnode .loadleft{
height: 100%;width:3px ;position: absolute;left: 0;top: 0;
background: url(images/left_bg.png) no-repeat;z-index: 4;
}
.outernode .controlsnode .loadnode .loadright{
height: 100%;width:3px ;position: absolute;right: 0;top: 0;
background: url(images/right_bg.png) no-repeat;
}
.outernode .controlsnode .loadnode .crlnode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;}
.outernode .controlsnode .timenode{
float: left;width: 75px;height: 10px;margin: 9px 0 0 9px;
}
.outernode .controlsnode .timenode span{font-size:10px;float: left;line-height: 10px;color: white; }
.outernode .controlsnode .volumenode{
width: 17px;height: 16px;float: left;margin: 5px 0 0 6px;
background: url(images/volume_bg.png);
}
.outernode .controlsnode .volumeline{
height: 8px;width: 61px;float: left;margin: 10px 0 0 4px;
background: url(images/volumeline_bg.png) repeat-x;position: relative;
}
.outernode .controlsnode .volumeline .v_left{
width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat;
}
.outernode .controlsnode .volumeline .v_right{
width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat;
}
.outernode .controlsnode .volumeline .v_dragnode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;}
.outernode .controlsnode .fullnode{
width:15px;height:17px;float: left;margin: 6px 0 0 35px;
background: url(images/full_bg.png) no-repeat;cursor: pointer;
transition: 0.7s;
}
.outernode .controlsnode .fullnode:hover{
background: url(images/full_hover_bg.png) no-repeat;
}
</style>
</head>
<body>
<!-- 最外层的元素 -->
<div class='outernode'>
<!-- video元素 -->
<video class='videonode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
<!-- 控制器的元素 -->
<div class='controlsnode'>
<!-- 控制播放暂停的按钮 -->
<div class='playnode'></div>
<!-- video的进度条 -->
<div class='loadnode'>
<div class='loadleft'></div>
<div class='loadright'></div>
<!-- 拖动进度条的按钮 -->
<div class='crlnode'></div>
<!-- 真正的进度条 -->
<div class='linenode'>
<div class='lineright'></div>
</div>
</div>
<!-- 时间的元素 -->
<div class='timenode'>
<span class='now'>00:00</span>
<span> - </span>
<span class='all'>4:30</span>
</div>
<!-- 声音的标志 -->
<div class='volumenode'></div>
<!-- 声音的条 -->
<div class='volumeline'>
<div class='v_left'></div>
<div class='v_right'></div>
<div class='v_dragnode'></div>
</div>
<!-- 全屏的按钮 -->
<div class='fullnode'></div>
</div>
</div>
<script type="text/javascript">
//播放暂停的控制
//playnode 播放器按钮
//videonode 播放器
//playbln 控制暂停播放的布尔值
//fullnode 全屏按钮
//nownode 当前时间
//allnode 视频的全部时间
//linenode 当前的进度条
//crlnode 进度条按钮
//loadnode 进度条外面的元素
var playnode = document.getelementsbyclassname('playnode')[0],
videonode = document.getelementsbyclassname('videonode')[0],
fullnode = document.queryselector('.fullnode'),
nownode = document.queryselector('.now'),
allnode = document.queryselector('.all'),
linenode = document.queryselector('.linenode'),
crlnode = document.queryselector('.crlnode'),
loadnode = document.queryselector('.loadnode'),
vdragnode = document.queryselector('.v_dragnode'),
playbln = true;
//播放、暂停的事件
playnode.onclick = function(){
//传统的通过布尔值去改变classname的方法
playbln = !playbln;
if(playbln == false){
this.classname = 'pausenode';
videonode.play();
}
else{
this.classname = 'playnode';
videonode.pause();
}
};
//全屏按钮的事件
fullnode.onclick = function(){
if(videonode.webkitrequestfullscreen){
videonode.webkitrequestfullscreen();
}
else if(videonode.mozrequestfullscreen){
videonode.mozrequestfullscreen();
}
else{
videonode.requestfullscreen();
}
};
//解决最开始时间的nan的问题
videonode.addeventlistener('canplay',function(){
var needtime = parseint(videonode.duration);
var s = needtime%60;
var m = parseint(needtime / 60);
var timenum = todou(m)+':'+todou(s);
allnode.innerhtml = timenum;
},false);
//解决 时间不足10 的问题
function todou(time){
return time<10?'0'+time:time;
}
//当视频播放的时候 需要当前的时间动起来
videonode.addeventlistener('timeupdate',function(){
//目前的 百分比进度
linenode.style.width = videonode.currenttime/videonode.duration*100+'%';
crlnode.style.left = linenode.offsetwidth - 8.5 + 'px'
var needtime = parseint(videonode.currenttime);
var s = needtime%60;
var m = parseint(needtime / 60);
var timenum = todou(m)+':'+todou(s);
nownode.innerhtml = timenum;
},false);
//声音的拖拽按钮
vdragnode.onmousedown = function(e){
var ev = e || event;
var l = ev.clientx - this.offsetleft;
document.onmousemove = function(e){
var ev = e || event;
var needx = ev.clientx - l;
var maxx = vdragnode.parentnode.offsetwidth - 2.5;
needx = needx < -2.5 ? - 2.5 : needx;
needx = needx > maxx ? maxx : needx;
//计算0 - 1
var lastvolume = (vdragnode.offsetleft + 2) / vdragnode.parentnode.offsetwidth ;
videonode.volume = lastvolume < 0 ? 0 : lastvolume;
vdragnode.style.left = needx + 'px';
};
document.onmouseup = function(e){
document.onmousemove = document.onmouseup = null;
}
return false;
}
//拖拽进度条按钮
crlnode.onmousedown = function(e){
var ev = e || event;
var l = ev.clientx - this.offsetleft;
videonode.pause();
document.onmousemove = function(e){
var ev = e || event;
var needx = ev.clientx - l;
var maxx = loadnode.offsetwidth - 8.5;
needx = needx < -8.5 ? -8.5 : needx;
needx = needx > maxx ? maxx : needx;
crlnode.style.left = needx + 'px';
linenode.style.width = (crlnode.offsetleft+9)/loadnode.offsetwidth*100 + '%';
};
document.onmouseup = function(){
document.onmousemove = document.onmouseup = null;
videonode.currenttime = videonode.duration * (crlnode.offsetleft+9)/loadnode.offsetwidth;
if(playbln == false){
//console.log(1);
playnode.classname = 'pausenode';
videonode.play();
}
else{
//console.log(2);
playnode.classname = 'playnode';
videonode.pause();
}
};
return false;
};
</script>
</body>
</html>
推荐阅读
-
威力酷剪怎么给视频加文字?威力酷剪添加自定义文字的流程详解
-
西瓜影音安装使用及西瓜影音播放器查找和下载视频的方法介绍
-
RTMP协议与RTMP视频播放器的应用
-
b站怎么切换到html5视频播放器的效果?
-
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
-
Flash视频播放器常用的onMetaData参数信息说明
-
如何将网页视频播放器调用换成西瓜影音 西瓜影音网页调用说明以及网页调用代码
-
HTML5 视频播放(video),JavaScript控制视频的实例代码
-
HTML5视频播放插件 video.js介绍
-
android之视频播放系统VideoView和自定义VideoView控件的应用