HTML5自定義視頻播放器源碼
發(fā)布時(shí)間：2020-01-06 11:06:33 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了HTML5自定義視頻播放器源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
video對(duì)象
兼容性寫(xiě)法
<video controls>
<source src="data/demo.ovg">
<source src="data/demo.mp4">
<source src="data/demo.webm">
您的瀏覽器不支持，請(qǐng)升級(jí)您的瀏覽器
</video>
video 標(biāo)簽 width height autoplay muted
poster帶有預(yù)覽圖（海報(bào)圖片）的視頻播放器
<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg'></video>
選中video標(biāo)簽
var VideoNode = document.getElementById('myVideo');
src控制視頻的來(lái)源
VideoNode.src = 'data/demo.ogv';
手動(dòng)設(shè)置控件 controls
VideoNode.controls = true;
設(shè)置視頻音量
VideoNode.volume = 0.5;
currentTime當(dāng)前播放時(shí)間
快進(jìn)效果
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 視頻已經(jīng)加載好 可以開(kāi)始播放了
VideoNode.addEventListener('canplay',function(){
console.log('視頻已經(jīng)加載好 可以開(kāi)始播放了');
});
requestFullscreen 讓video標(biāo)簽變成全屏
VideoNode.webkitRequestFullscreen();
VideoNode.mozRequestFullScreen();
fullScreenNode.onclick = function(){
if(VideoNode.webkitRequestFullscreen){
VideoNode.webkitRequestFullscreen();
}
else if(VideoNode.mozRequestFullScreen){
VideoNode.mozRequestFullScreen();
}
};
volumechange 當(dāng)音量更改時(shí)
VideoNode.onvolumechange = function(){
console.log('volumechange');
};
聲音隨機(jī)更改
volumeNode.onclick = function(){
VideoNode.volume = Math.random();
};
seeking 當(dāng)用戶(hù)開(kāi)始拖動(dòng)進(jìn)度條時(shí) 就會(huì)觸發(fā)的事件
var seekingNum = 0;
VideoNode.onseeking = function(){
console.log('seeking...');
seekingNum++;
seeking.innerHTML = seekingNum;
};
seeked 當(dāng)用戶(hù)對(duì)視頻的進(jìn)度條并且已經(jīng)完成操作時(shí)會(huì)觸發(fā)的事件
var seekedNum = 0;
VideoNode.onseeked = function(){
console.log('seeked...');
seekedNum++;
seeked.innerHTML = seekedNum;
};
timeupdate監(jiān)聽(tīng)視頻播放的狀態(tài)
VideoNode.addEventListener('timeupdate',function(){
// 總時(shí)長(zhǎng)，以分鐘：秒的形式顯示
let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60);
// 當(dāng)前時(shí)間，以分鐘：秒的形式顯示
let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60);
timeNode.innerHTML = nowTime+'/'+allTime;
})
readyState 視頻的準(zhǔn)備信息
console.log(VideoNode.readyState);
setTimeout(function(){
console.log(VideoNode.readyState);
},500);
playbackRate 查看或設(shè)置視頻的一個(gè)播放速度
console.log(VideoNode.playbackRate)
Rate設(shè)置倍速
//Rate設(shè)置0.5倍速
RateNode.children[0].onclick = function(){
VideoNode.playbackRate = 0.5;
};
//Rate設(shè)置1倍速
RateNode.children[1].onclick = function(){
VideoNode.playbackRate = 1;
};
//Rate設(shè)置2倍速
RateNode.children[2].onclick = function(){
VideoNode.playbackRate = 2;
};
loop的設(shè)置
loopNode.onclick = function(){
if(VideoNode.loop == false){
this.innerHTML = '循環(huán)';
VideoNode.loop = true;
}
else{
this.innerHTML = '不循環(huán)';
VideoNode.loop = false;
}
};
src返回的數(shù)據(jù)
console.log('src='+VideoNode.src);
currentSrc返回的數(shù)據(jù)
console.log('currentSrc='+VideoNode.currentSrc);
監(jiān)聽(tīng)ended事件
VideoNode.addEventListener('ended',function(){
console.log('視頻播放結(jié)束了');
VideoNode.play();
})
查看視頻的網(wǎng)絡(luò)狀態(tài)
console.log(VideoNode.networkState)
手動(dòng)設(shè)置控件 controls
VideoNode.controls = true;
手動(dòng)設(shè)置靜音 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的進(jìn)度條 -->
<div class='loadNode'>
<div class='loadLeft'></div>
<div class='loadRight'></div>
<!-- 拖動(dòng)進(jìn)度條的按鈕 -->
<div class='crlNode'></div>
<!-- 真正的進(jìn)度條 -->
<div class='lineNode'>
<div class='lineRight'></div>
</div>
</div>
<!-- 時(shí)間的元素 -->
<div class='timeNode'>
<span class='now'>00:00</span>
<span> - </span>
<span class='all'>4:30</span>
</div>
<!-- 聲音的標(biāo)志 -->
<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 當(dāng)前時(shí)間
//allNode 視頻的全部時(shí)間
//LineNode 當(dāng)前的進(jìn)度條
//CrlNode 進(jìn)度條按鈕
//LoadNode 進(jìn)度條外面的元素
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(){
//傳統(tǒng)的通過(guò)布爾值去改變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();
}
};
//解決最開(kāi)始時(shí)間的NAN的問(wèn)題
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);
//解決 時(shí)間不足10 的問(wèn)題
function toDou(time){
return time<10?'0'+time:time;
}
//當(dāng)視頻播放的時(shí)候 需要當(dāng)前的時(shí)間動(dòng)起來(lái)
VideoNode.addEventListener('timeupdate',function(){
//目前的 百分比進(jìn)度
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;
//計(jì)算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;
}
//拖拽進(jìn)度條按鈕
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>
總結(jié)
以上所述是小編給大家介紹的HTML5自定義視頻播放器源碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻
HTML5中的video標(biāo)簽用于播放視頻文件的，本文介紹了Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻，具有一定的參考價(jià)值，感興趣的可以了解一下2023-09-27
HTML中實(shí)現(xiàn)音樂(lè)或視頻自動(dòng)播放案例詳解
由于期末大作業(yè)我想插入一個(gè)背景音樂(lè)，實(shí)現(xiàn)點(diǎn)開(kāi)網(wǎng)頁(yè)就會(huì)自動(dòng)播放音頻的效果，今天通過(guò)本文給大家分享下我基于HTML實(shí)現(xiàn)音樂(lè)或視頻自動(dòng)播放功能，代碼簡(jiǎn)單易懂，需要的朋友參2022-05-27HTML5 video循環(huán)播放多個(gè)視頻的方法步驟
這篇文章主要介紹了HTML5 video循環(huán)播放多個(gè)視頻的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-08-06html5中嵌入視頻自動(dòng)播放的問(wèn)題解決
這篇文章主要介紹了html5中嵌入視頻自動(dòng)播放的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-05-25html5自動(dòng)播放mov格式視頻的實(shí)例代碼
這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-14
目前大多數(shù)網(wǎng)絡(luò)攝像頭都是通過(guò) RTSP 協(xié)議傳輸視頻流的，但是 HTML 并不標(biāo)準(zhǔn)支持 RTSP 流。本文重點(diǎn)給大家介紹HTML5 播放 RTSP 視頻的實(shí)例代碼，需要的朋友參考下吧2019-07-29HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼
這篇文章主要介紹了HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼，需要的朋友參考下吧2018-10-08- 這篇文章主要介紹了HTML5視頻播放插件 video.js介紹 ,需要的朋友可以參考下2018-09-29
- 這里主要研究的是通過(guò)應(yīng)用html5來(lái)解決視頻播放的問(wèn)題。Adobe公司因?yàn)閼?zhàn)略錯(cuò)誤，忽視了移動(dòng)互聯(lián)這塊，移動(dòng)終端對(duì)flash支持并不好，特別是蘋(píng)果終端都不支持flash（蘋(píng)果電腦和2016-11-06
html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法
本文主要介紹了html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法，包含iframe標(biāo)簽，VLC插件和一些常見(jiàn)的js插件，具有一定的參考價(jià)值，感興趣的可以了解一下2024-03-04
