实例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].οnmοuseοver= 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].οnc
最低0.47元/天 解锁文章
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
