首页 > 代码库 > js- 视频播放器
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="http://www.mamicode.com/a.mp4"/>
</video><br>
<input type="button" value="http://www.mamicode.com/播放"/>
<input type="button" value="http://www.mamicode.com/00:00:00"/>
<input type="button" value="http://www.mamicode.com/00:00:00"/>
<input type="button" value="http://www.mamicode.com/静音"/>
<input type="button" value="http://www.mamicode.com/全屏"/>
<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 = http://www.mamicode.com/‘暂停‘;> //获取视频总时长 00:00:00
function 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>
js- 视频播放器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。