标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5视频测试</title>
<style>
*{margin: 0;padding: 0;list-style-type: none;font-family: "微软雅黑";}
.player{width: 1024px;margin: 50px auto;position: relative;}
.player video{width:1024px;}
.player .ctl{width: 1024px;height: 30px;background: rgba(90,90,90,.6);position: absolute;right: 0; bottom: 4px;cursor:default;opacity:0.8;transition:opacity 0.8s;}
.player .ctl .btn,.player .ctl .time{padding: 0 5px; font-size: 14px;line-height: 20px;border-radius: 5px; background: #fff;position: absolute;bottom: 5px;}
.player .ctl .btn-play{left: 20px;}
.player .ctl .btn-jy{right: 200px;}
.player .ctl .btn-qp{right: 20px;}
.player .ctl .sch{height: 12px;border:1px solid #fff;border-radius: 10px;
position: absolute; bottom: 8px;overflow: hidden;z-index: 1;}
.player .ctl .sch-play{width: 400px;left:230px;}
.player .ctl .sch-yl{width:100px;right:80px;}
.player .ctl .sch-play .sch-sp{width: 200px;}
.player .ctl .sch-yl .sch-sp{width: 80px;}
.player .ctl .sch .sch-sp{position: absolute;height: 12px; top: 0;background: #fff;}
.player .ctl .sch-btn{position: absolute;width: 30px;height: 20px;border-radius: 5px; top: 5px;z-index: 2;background: #fff;}
.player .ctl .sch-s{left:430px;}
.player .ctl .sch-y{left:900px;}
/*.player .ctl li:nth-child(1){position: absolute;left：20px;top: 50%;margin-top:-15px; }*/
</style>
</head>
<body>
<div class="player">
<video>
<source src="潭州教育.mp4" type="video/mp4">
您的浏览器不支持Video标签。
</video>
<ul class="ctl" onselectstart="return false">
<li class="btn btn-play">播放</li>
<li class="time" style="left:100px">00:00:00</li>
<li class="sch sch-play">
<span class="sch-sp" style = "width:0px;"></span>
</li>
<li class="sch-btn sch-s" style="left:215px;"></li>
<li class="time" style="right:300px">00:00:00</li>
<li class="btn btn-jy">静音</li>
<li class="sch sch-yl">
<span class="sch-sp"></span>
</li>
<li class="sch-btn sch-y"></li>
<li class="btn btn-qp">全屏</li>
</ul>
</div>
<script type="text/javascript">
var oVid = document.getElementsByClassName("player")[0];
var oVideo = oVid.children[0]; //拿到video
var oCtl = oVid.children[1]
var oUl = oCtl.children; //拿到所有li
var oUlWidth = parseInt(oUl[2].offsetWidth)-2;
var maxTime;
var thisTime;
var oSp = oUl[2].children[0];
console.log(parseInt(oUl[3].style.left));
var oLeft = parseInt(oUl[2].offsetLeft)+parseInt(oVid.offsetLeft)+parseInt(oCtl.offsetLeft);
var oSchSp = parseInt(oVid.offsetLeft);
oUl[0].onclick = function(){
if(oVideo.paused){
oVideo.play();
oUl[0].innerHTML = "暂停";
oVid.onmouseover = function(){
oCtl.style.opacity=0.8;
}
oVid.onmouseout = function(){
oCtl.style.opacity=0;
}
}else{
oVideo.pause();
oUl[0].innerHTML = "播放";
oVid.onmouseover=null;
oVid.onmouseout =null;
}
}
var oDateOvideo = function(time){
time = ""+time;
time = time.length<2?0+time:time;
return time;
}
oVideo.onloadedmetadata = function(){
maxTime = oVideo.duration;
var h = oDateOvideo(Math.floor(maxTime/3600)); //时
var m = oDateOvideo(Math.floor(maxTime%3600/60)); //分
var s = oDateOvideo(Math.floor(maxTime%3600%60)); //秒
oUl[4].innerHTML = h+":"+m+":"+s;
}
function date(){
thisTime = oVideo.currentTime;
var h = oDateOvideo(Math.floor(thisTime/3600)); //时
var m = oDateOvideo(Math.floor(thisTime%3600/60)); //分
var s = oDateOvideo(Math.floor(thisTime%3600%60)); //秒
oUl[1].innerHTML = h+":"+m+":"+s;
var t = (thisTime/maxTime);
//console.log(oUl[2].children[0].width);
oSp.style.width = parseInt(oUlWidth-2) * t.toFixed(2)+"px";
oUl[3].style.left = 215+parseInt( oSp.style.width ) +"px";
}
oVideo.ontimeupdate = date;
oUl[5].onclick = function(){
if(oVideo.muted){
oVideo.muted=false;
oUl[5].innerHTML = "静音";
}else{
oVideo.muted=true;
oUl[5].innerHTML = "声音";
}
}
var move = function(ev){
ev = ev || window.event;
var _X = ev.clientX;
//oUl[3].style.left = parseInt(_X) - oSchSp;
//var strae = parseInt(oUl[3].style.left);
oVideo.ontimeupdate = null;
//console.log(_X-oLeft);
var t = _X-oLeft;
oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2));
//console.log(parseInt(oUl[3].style.left));
oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px";
oUl[3].style.left = _X - oSchSp-15 +"px";
document.onmousemove = function(ev){
ev = ev || window.event;
var _x = ev.clientX;
var xChange = parseInt(_x)-parseInt(_X);
//oUl[3].style.left = xChange + _X - oSchSp - 15 +"px";
var t = _x - oLeft;
console.log(oVideo.currentTime);
oVideo.currentTime = parseInt(maxTime * (t/oUlWidth).toFixed(2));
oSp.style.width = oUlWidth * (t/oUlWidth).toFixed(2)+"px";
if ((_x - oSchSp-15)<200) {
oUl[3].style.left = 200+"px";
}
else if ((_x - oSchSp-15)>600) {
oUl[3].style.left = 600+"px";
}
else{
oUl[3].style.left = _x - oSchSp-15+"px";
}
//console.log(parseInt(_x)-parseInt(_X));
date();
}
document.onmouseup = function(){
//oUl[2].onmousedown = null;
document.onmousemove = null;
oVideo.ontimeupdate = date;
//alert(oSp.onmousemove);
}
}
oUl[2].onmousedown = move;
oUl[3].onmousedown = move;
oUl[8].onclick = function(){
//oVideo.webkitRequestFullScreen();
if(oVideo.requestFullScreen) {
oVideo.requestFullScreen();
} else if(oVideo.mozRequestFullScreen) {
oVideo.mozRequestFullScreen();
} else if(oVideo.webkitRequestFullScreen) {
oVideo.webkitRequestFullScreen();
}
}
/*
video和audio属性：
Autoplay 视频就绪自动播放
controls 向用户显示播放控件
Width 设置播放器宽度 //audio没有
Height 设置播放器高度 //audio没有
Loop 播放完是否继续播放该视频，循环播放
Preload 属性描述了在页面加载后是否预加载音视频;
如果设置了 autoplay 属性，则忽略该属性;
属性值：
none:不执行预加载也不执行元数据
mete:加载元数据(不加预载视频，但要获取视频时长等等属性)
auto:默认值（预加载或缓冲）
Src 视频url地址
Poster 加载等待的画面图片
Video API方法
play()
pause()
load()
全屏: webkit element.webkitRequestFullScreen();
Firefox element.mozRequestFullScreen();
W3C element.requestFullscreen();
退出全屏：
webkit document.webkitCancelFullScreen();
Firefox document.mozCancelFullScreen();
W3C document.exitFullscreen();
Video API属性
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音 false /true
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked
timeupdate ended ratechange durationchange volumechange
HTML5支持的音频格式：
Ogg 免费 支持的浏览器:C、F、O
MP3 收费 支持的浏览器: I、C、S
Wav 收费 支持的浏览器: F、O、S
audio 属性
autoplay 自动播放
controls 向用户显示播放控件
loop 循环
preload 是否等加载完再播放
src 要播放的音频的 URL。
*/
</script>
</body>
</html>标签：
原文地址：http://blog.csdn.net/babybk/article/details/51336756
