video對(duì)象
兼容性寫法
<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控制視頻的來源
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)加載好 可以開始播放了
VideoNode.addEventListener('canplay',function(){ console.log('視頻已經(jīng)加載好 可以開始播放了'); });
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)用戶開始拖動(dòng)進(jìn)度條時(shí) 就會(huì)觸發(fā)的事件
var seekingNum = 0; VideoNode.onseeking = function(){ console.log('seeking...'); seekingNum++; seeking.innerHTML = seekingNum; };
seeked 當(dāng)用戶對(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à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)聽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)的通過布爾值去改變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(); } }; //解決最開始時(shí)間的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); //解決 時(shí)間不足10 的問題 function toDou(time){ return time<10?'0'+time:time; } //當(dāng)視頻播放的時(shí)候 需要當(dāng)前的時(shí)間動(dòng)起來 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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
標(biāo)簽:聊城 盤錦 綏化 赤峰 阿壩 金昌 萍鄉(xiāng) 中山
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5自定義視頻播放器源碼》,本文關(guān)鍵詞 HTML5,自定義,視頻,播放器,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。