當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

js- 视频播放器

發布時間：2023/11/27 生活经验 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 js- 视频播放器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

<!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');//進度滑塊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.獲取視頻總時間,默認是秒aInput[2].value = changeTime(oVideo.duration);oVideo.ondurationchange = function(){aInput[2].value = changeTime(oVideo.duration);}//功能3 靜音aInput[3].onclick = function(){if(oVideo.muted ){ //如果是靜音狀態,點擊按鈕變成不靜音! 音量在0-1之間, 0靜音,1最大oVideo.volume = 0.3;this.value = '靜音';oVideo.muted = false;}else { //如果當前非靜音狀態,點擊按鈕變成靜音,音量變成0oVideo.volume = 0;this.value = '取消靜音';oVideo.muted = true;}};//功能4 全屏  方法1.視頻的寬高==可視區的寬高! 方法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 播放時間進度條oDiv2.onmousedown = function(ev){var ev = ev || window.event;disX = ev.clientX - oDiv2.offsetLeft;//鼠標坐標到控件的左邊的距離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 音量進度條控制oDiv4.onmousedown = function(ev){var ev = ev || window.event;disX = ev.clientX - oDiv4.offsetLeft;//鼠標坐標到控件的左邊的距離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;};//當視頻播放的時候,顯示當前的播放的時間,每隔一秒更新下,當暫停的時候清除定時器function nowTime(){aInput[1].value = changeTime(oVideo.currentTime);var scale = oVideo.currentTime / oVideo.duration;oDiv2.style.left = scale * 270 +'px'; //視頻播放時進度條要向前跑 270 = oDiv1.style.width - oDiv2.style.width}
　　　　 //獲取視頻總時長 00:00:00function changeTime(iNum){iNum = parseInt(iNum);var iH = toZero(Math.floor(iNum / 3600)); //時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>

轉載于:https://www.cnblogs.com/bravolove/p/6002544.html

總結

以上是生活随笔為你收集整理的js- 视频播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。