标签：
实例1：带声音的导航
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
#ul1{ width:1000px; height:30px;}
#ul1 li{ list-style:none; width:100px;height:30px; background:red; color:white; border:1px #000 solid; float:left;line-height:30px; text-align:center;}
</style>
<script>
window.onload = function(){
varaLi = document.getElementsByTagName(‘li‘);
varoA = document.getElementById(‘a1‘);
for(vari=0;i<aLi.length;i++){
aLi[i].onmouseover= function(){
//this.getAttribute(‘au‘);
//字符串拼接的方式，获取不同的地址
oA.src = ‘http://s8.qhimg.com/share/audio/piano1/‘+this.getAttribute(‘au‘)+‘4.mp3‘;
//播放
oA.play();
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li au="a">11111</li>
<li au="b">22222</li>
<li au="c">33333</li>
<li au="d">44444</li>
<li au="e">55555</li>
<li au="f">66666</li>
<li au="g">77777</li>
</ul>
<audioid="a1"></audio>
</body>
</html>
实例2：视频与canvas结合
将视频输出到canvas中
<script>
window.onload = function(){
varoV = document.getElementById(‘v1‘);
varoC = document.getElementById(‘c1‘);
varoGC = oC.getContext(‘2d‘);
oC.width= oV.videoWidth;
oC.height= oV.videoHeight;
setInterval(function(){
oGC.drawImage(oV , 0 , 0 );
},30);
};
</script>
</head>
<body>
<video controls id="v1">
<sourcesrc="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
</video>
<canvasid="c1"></canvas>
</body>
实例3：自制播放器
1. 播放，暂停
aInput[0].onclick= function(){
if( oV.paused ){
oV.play();//播放
this.value = ‘暂停‘;
}
else{
oV.pause();//暂停
this.value = ‘播放‘;
}
};
2. 获取总时间
aInput[2].value= changeTime(oV.duration);
//修改总时间
functionchangeTime(iNum){
iNum= parseInt( iNum );
variH = toZero(Math.floor(iNum/3600));
variM = toZero(Math.floor(iNum%3600/60));
variS = toZero(Math.floor(iNum%60));
returniH + ‘:‘ +iM + ‘:‘ + iS;
}
//补零函数
functiontoZero(num){
if(num<=9){
return‘0‘ + num;
}
else{
return‘‘ + num;
}
}
3. 获取当前时间
点击播放后应该开启定时器，暂停后清除定时器
vartimer=null;
aInput[0].onclick=function(){
if(oV.paused)
{
oV.play();
aInput[0].value="暂停";
nowTime();
timer=setInterval(
nowTime
,1000);
}
else
{
oV.pause();
aInput[0].value="播放";
clearInterval(timer);
}
};
function nowTime(){
aInput[1].value=changeTime(oV.currentTime);
}
4. 静音
aInput[3].onclick=function(){
if(oV.muted)
{
oV.volume=1;
this.value="静音";
oV.muted=false;
}
else
{
oV.volume=0;
this.value="取消静音";
oV.muted=true;
}
}
5. 全屏
可以直接调用api，也可以让播放器的宽高与浏览器宽高一样来进行设置
aInput[4].onclick = function(){
oV.mozRequestFullScreen();
};
6. 进度和音量的拖拽
思路：就是想让播放到指定点，拖拽就是找一个比例，比例是0到1之间，通过比例去乘以总时间，得到当前的时间
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;
if(L<0){
L = 0;
}
elseif(L>oDiv1.offsetWidth - oDiv2.offsetWidth){
L =oDiv1.offsetWidth - oDiv2.offsetWidth;
}
oDiv2.style.left = L + ‘px‘;
//找出0到1的比例
varscale = L/(oDiv1.offsetWidth - oDiv2.offsetWidth);
//得到拖拽后当前的时间
oV.currentTime= scale * oV.duration;
//让当前时间更新
nowTime();
};
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};
根据播放时间改变进度条的移动位置
functionnowTime(){
aInput[1].value =changeTime(oV.currentTime);
//获取比例
var scale =oV.currentTime/oV.duration;
//设置位置
oDiv2.style.left= scale * 240 + ‘px‘;
}
整体代码：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
#div1{width:300px; height:30px; background:#666; overflow:hidden; position:relative;}
#div2{width:60px; height:30px; background:red; position:absolute; left:0; top:0;}
#div3{width:300px; height:10px; background:#666; overflow:hidden; position:relative;top:10px;}
#div4{width:60px; height:10px; background:yellow; position:absolute; left:240px;top:0;}
</style>
<script>
window.onload= function(){
var oV = 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 disX = 0;
var disX2 = 0;
var timer = null;
aInput[0].onclick = function(){
if( oV.paused ){//如果是暂停的
oV.play();
this.value = ‘暂停‘;
nowTime();
timer =setInterval(nowTime,1000);
}
else{
oV.pause();
this.value = ‘播放‘;
clearInterval(timer);
}
};
aInput[2].value = changeTime(oV.duration);
aInput[3].onclick = function(){
if( oV.muted ){
oV.volume = 1;
this.value = ‘静音‘;
oV.muted = false;
}
else{
oV.volume = 0;
this.value = ‘取消静音‘;
oV.muted = true;
}
};
aInput[4].onclick = function(){
oV.mozRequestFullScreen();
};
function nowTime(){
aInput[1].value =changeTime(oV.currentTime);
//获取比例
var scale =oV.currentTime/oV.duration;
//设置位置
oDiv2.style.left = scale * 240 +‘px‘;
}
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){
if(num<=9){
return ‘0‘ + num;
}
else{
return ‘‘ + num;
}
}
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;
if(L<0){
L = 0;
}
elseif(L>oDiv1.offsetWidth - oDiv2.offsetWidth){
L = oDiv1.offsetWidth- oDiv2.offsetWidth;
}
oDiv2.style.left = L + ‘px‘;
//找出0到1的比例
var scale =L/(oDiv1.offsetWidth - oDiv2.offsetWidth);
//得到拖拽后当前的时间
oV.currentTime = scale *oV.duration;
//让当前时间更新
nowTime();
};
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};
oDiv4.onmousedown = function(ev){
var ev = ev || window.event;
disX2 = ev.clientX -oDiv4.offsetLeft;
document.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - disX2;
if(L<0){
L = 0;
}
elseif(L>oDiv3.offsetWidth - oDiv4.offsetWidth){
L =oDiv3.offsetWidth - oDiv4.offsetWidth;
}
oDiv4.style.left = L + ‘px‘;
var scale =L/(oDiv3.offsetWidth - oDiv4.offsetWidth);
oV.volume = scale;
};
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};
};
</script>
</head>
<body>
<videoid="v1">
<source src="Intermission-Walk-in.ogv"></source>
<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>
</video><br/>
<inputtype="button" value="播放" />
<inputtype="button" value="00:00:00" />
<inputtype="button" value="00:00:00" />
<inputtype="button" value="静音" />
<inputtype="button" value="全屏" />
<divid="div1">
<div id="div2"></div>
</div>
<divid="div3">
<div id="div4"></div>
</div>
</body>
</html>
HTML5音频与视频实例（带声音的导航、视频与canvas结合、自制播放器）
标签：
原文地址：http://blog.csdn.net/u013267266/article/details/51353790
