js- 视频播放器
1.
?
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>自制視頻播放器</title><style>*{margin: 0; padding: 0}#div1{width: 300px; height: 20px; background: #666; overflow: hidden;position: relative;top:10px}#div2{width: 30px; height: 20px;background: red; position: absolute; left: 0; top: 0;}#div3{width: 300px; height: 10px; background: #666; overflow: hidden;position: relative;top:20px}#div4{width: 30px; height: 10px;background: green; position: absolute; left: 90px; top: 0;}</style>
</head>
<body>
<video id="v1"><source src="a.mp4"/>
</video><br>
<input type="button" value="播放"/>
<input type="button" value="00:00:00"/>
<input type="button" value="00:00:00"/>
<input type="button" value="靜音"/>
<input type="button" value="全屏"/>
<div id="div1"><div id="div2"></div>
</div>
<div id="div3"><div id="div4"></div>
</div>
<script>window.onload = function(){var oVideo = document.getElementById('v1');var aInput = document.getElementsByTagName('input');var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');//進(jìn)度滑塊var oDiv3 = document.getElementById('div3');var oDiv4 = document.getElementById('div4');//音量滑塊var timer = null;//功能1.播放暫停aInput[0].onclick = function(){if(oVideo.paused){oVideo.play();this.value = '暫停';nowTime();timer = setInterval(nowTime, 1000);}else if(oVideo.played){oVideo.pause();this.value = '播放';clearInterval(timer);}}//功能2.獲取視頻總時(shí)間,默認(rèn)是秒aInput[2].value = changeTime(oVideo.duration);oVideo.ondurationchange = function(){aInput[2].value = changeTime(oVideo.duration);}//功能3 靜音aInput[3].onclick = function(){if(oVideo.muted ){ //如果是靜音狀態(tài),點(diǎn)擊按鈕變成不靜音! 音量在0-1之間, 0靜音,1最大oVideo.volume = 0.3;this.value = '靜音';oVideo.muted = false;}else { //如果當(dāng)前非靜音狀態(tài),點(diǎn)擊按鈕變成靜音,音量變成0oVideo.volume = 0;this.value = '取消靜音';oVideo.muted = true;}};//功能4 全屏 方法1.視頻的寬高==可視區(qū)的寬高! 方法2: 自帶的全屏的方法 mozRequestFullScreen()aInput[4].onclick = function(){//oVideo.mozRequestFullScreen();var w = document.body.clientWidth || document.documentElement.clientWidth;var h = document.body.clientHeight || document.documentElement.clientHeight;oVideo.width = w;oVideo.height = h;};//功能5 播放時(shí)間進(jìn)度條oDiv2.onmousedown = function(ev){var ev = ev || window.event;disX = ev.clientX - oDiv2.offsetLeft;//鼠標(biāo)坐標(biāo)到控件的左邊的距離document.onmousemove = function(ev){var ev = ev || window.event;var L = ev.clientX - disX;//控件到html的左邊的距離if(L < 0){L = 0;}else if( L > oDiv1.offsetWidth - oDiv2.offsetWidth){L = oDiv1.offsetWidth - oDiv2.offsetWidth;}oDiv2.style.left = L + 'px';var scale = L / (oDiv1.offsetWidth - oDiv2.offsetWidth);oVideo.currentTime = scale * oVideo.duration;nowTime();};document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;}return false;};//功能6 音量進(jìn)度條控制oDiv4.onmousedown = function(ev){var ev = ev || window.event;disX = ev.clientX - oDiv4.offsetLeft;//鼠標(biāo)坐標(biāo)到控件的左邊的距離document.onmousemove = function(ev){var ev = ev || window.event;var L = ev.clientX - disX;//控件到html的左邊的距離if(L < 0){L = 0;}else if( L > oDiv3.offsetWidth - oDiv4.offsetWidth){L = oDiv3.offsetWidth - oDiv4.offsetWidth;}oDiv4.style.left = L + 'px';var scale = L / (oDiv3.offsetWidth - oDiv4.offsetWidth);oVideo.volume = scale;};document.onmouseup = function(){document.onmousemove = null;document.onmouseup = null;};return false;};//當(dāng)視頻播放的時(shí)候,顯示當(dāng)前的播放的時(shí)間,每隔一秒更新下,當(dāng)暫停的時(shí)候清除定時(shí)器function nowTime(){aInput[1].value = changeTime(oVideo.currentTime);var scale = oVideo.currentTime / oVideo.duration;oDiv2.style.left = scale * 270 +'px'; //視頻播放時(shí)進(jìn)度條要向前跑 270 = oDiv1.style.width - oDiv2.style.width}
//獲取視頻總時(shí)長(zhǎng) 00:00:00function changeTime(iNum){iNum = parseInt(iNum);var iH = toZero(Math.floor(iNum / 3600)); //時(shí)var iM = toZero(Math.floor(iNum % 3600 / 60)); //分var iS = toZero(Math.floor(iNum % 60)); //秒return iH + ":" + iM + ":" + iS;}function toZero(num){return num <= 9 ? '0'+ num : ''+ num ;}};
</script></body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/bravolove/p/6002544.html
總結(jié)
- 上一篇： 银河装备殿现在还有吗？
- 下一篇： POJ 2430 状压DP