-
求职秘籍
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
摘要：HTML5视频控件的自制通过实际的案例向大家展示出来。
直接上代码，大家边看变练
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="自制播放器.css">
<script src="自制播放器.js"></script>
</head>
<body>
<div id="all">
<video id="vid">
<source src="[老友记][第七季]第24集_hd.mp4" />
</video>
<div id="box">
<div id="div1">
<div id="div3"></div>
<div id="div2"></div>
</div>
<form>
<input type="button" value="Play">
<input type="button" value="Mute">
<input type="range">
<span>00:00:00</span>
<input type="button" value="Fullscreen">
<span></span>
</form>
</div>
</div>
</body>
</html>
CSS部分
body{
background-color: #160d00;
}
*{
padding:0;
margin:0;
}
#all{
margin:0 auto;
width: 886px;
height:789px;
position: relative;
}
#vid{
width: 886px;
height:789px;
}
#box{
width: 886px;
background: url("img/背景.png") repeat left bottom;
position: absolute;
bottom: 70px;
}
#div1{
background-color: #8e9daf;
height:27px;
position: relative;
overflow: hidden;
}
#div2{
width: 27px;
height:27px;
background-color: #cccccc;
border-radius: 50%;
position: absolute;
left:0;
}
#div3{
width: 13px;
height:27px;
background-color: #1e3f69;
position: absolute;
left:0;
}
form{
padding: 2px;
}
form input{
font-size: 15px;
padding:10px 13px 10px 35px;
text-shadow: 2px 2px 2px black;
color: #ffffff;
border:none;
border-bottom: #1e3f69 1px solid;
}
.ran{
width:120px;
padding:0;
color: #636f7c;
margin-right: 10px;
}
.play{
background:#454545 url("img/暂停.png") no-repeat center left 14px;
}
.mute{
background:#454545 url("img/音量.png") no-repeat center left 14px;
}
.full{
background:#454545 url("img/全屏.png") no-repeat center left 14px;
float: right;
}
.span1,.span2{
display: inline-block;
color: #FFFFFF;
font-weight: bold;
}
.span2{
float: right;
}
input:hover{
background-color: #1e3f69 ;
border-bottom: red solid 1px;
}
input:focus { outline: none; }
JS部分
window.onload = function () {
var oV = document.querySelector("#vid");
var aInput = document.querySelectorAll("input");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
var aSpan = document.querySelectorAll("span");
var timer = null;
aInput[2].value = 100;
//Play的点击事件：播放时，点击暂停，暂停时，点击播放
aInput[0].onclick = function () {
if( oV.paused ){
oV.play();
this.value = 'Pause';
this.style.background = "#1e3f69 url('img/播放.png') no-repeat center left 14px";
nowTime();
timer = setInterval(nowTime,1000);
}
else{
oV.pause();
this.value = 'Play';
this.style.background = "#454545 url('img/暂停.png') no-repeat center left 14px";
clearInterval(timer);
}
};
//Mute的点击事件，有声音时，点击变为静音，静音时，点击变有声音
aInput[1].onclick = function(){
if( oV.muted ){
this.value = 'Mute';
this.style.background = "#454545 url('img/音量.png') no-repeat center left 14px";
aInput[2].value = 100;
oV.muted = false;
}
else{
this.value = 'Unmute';
this.style.background = "#1e3f69 url('img/静音.png') no-repeat center left 14px";
aInput[2].value = 0;
oV.muted = true;
}
};
//FullScreen的点击事件：两个if是兼容火狐和Chrome版本的，效果是点击时变为全屏
aInput[3].onclick = function(){
var userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > -1) {
oV.mozRequestFullScreen();
}
if (userAgent.indexOf("Chrome") > -1){
oV.webkitRequestFullScreen();
}
};
//鼠标事件：点击的瞬间改变input的位置，鼠标抬起时回到原位，实现抖动原理
function clickMoment(obj){
obj.onmousedown = function () {
this.style.transform = "translate(-2px)";
};
obj.onmouseup = function () {
this.style.transform = "none";
}
}
for(var i=0;i<aInput.length;i++){
clickMoment(aInput[i]);
}
//显示总时长，写了之后觉得没错，但是显示出来就是NaN，所以就注释起来,但是今天看的时候，发现一个问题，在网上打开是好的，本地打开就有问题了
aSpan[1].innerHTML = changeTime(oV.duration);
oDiv2.onmousedown = function (ev) {
ev = ev || event;
disX = ev.clientX - oDiv2.offsetLeft;
document.onmousemove = function (ev) {
ev = ev || event;
var newDis = ev.clientX - disX;
if(newDis<0){
newDis = 0;
}
else if(newDis > oDiv1.offsetWidth - oDiv2.offsetWidth){
newDis = oDiv1.offsetWidth - oDiv2.offsetWidth;
}
oDiv2.style.left = newDis + "px";
oDiv3.style.width = newDis + 13 + "px";
oV.play();
aInput[0].value = 'Pause';
aInput[0].style.background = "#1e3f69 url('img/播放.png') no-repeat center left 14px";
var scale = newDis/(oDiv1.offsetWidth - oDiv2.offsetWidth);
oV.currentTime = scale * oV.duration;
aSpan[0].innerHTML = changeTime(oV.currentTime);
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
};
return false;
};
//时间显示加0操作
function addZero(x) {
x < 10 ? x = '0' + x :x;
return x;
}
//函数changeTime:计算时分秒
function changeTime(obj) {
var oH = addZero(parseInt(obj/3600));
var oM = addZero(parseInt(obj/60));
var oS = addZero(parseInt(obj%60));
return oH + ":" + oM + ":" + oS;
}
//根据播放时间改变oDiv的位置
function nowTime() {
aSpan[0].innerHTML = changeTime(oV.currentTime);
var scale = oV.currentTime/oV.duration;
oDiv2.style.left = scale * 886 + 'px';
oDiv3.style.width = scale * 886 + 13 + 'px';
}
};
喜欢 | 0
不喜欢 | 0
擅长针对企业软件开发的产品设计及开发的细节与流程设计课程内容。座右铭：大道至简！
已有23人表明态度，87%喜欢该老师！
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
