标签：ges index padding use ons tle 绑定 div 取消
(1)audio音频
(2)video视频
controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
currentTime : 开始到播放现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)
error : 媒体发生错误的时候，返回错误代码 (只读)
currentSrc : 以字符串的形式返回媒体地址(只读)
play() : 媒体播放
pause() : 媒体暂停
load() : 重新加载媒体
onended：当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
ontimeupdate：当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本
poster : 视频播放前的预览图片 eg:oV.poster = ‘timg.jpg‘
width、height : 设置视频的尺寸
videoWidth、 videoHeight : 视频的实际尺寸(只读)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .tu{background: url(play.gif) no-repeat right; padding-right:20px; } </style> </head> <body> <div id="box"> <h2>双击播放</h2> <a href="#">像风一样自由</a><br><br> <a href="#">北京的冬天</a><br><br> <a href="#">吻得太逼真</a><br><br> <a href="#">最浪漫的事</a><br><br> <a href="#">成都</a><br><br> <br> <audio src="" id="a1" controls></audio> <br><br> <button>播放</button> <button>暂停</button> <button>快进</button> <button>快退</button> <br><br> <button>音量+</button> <button>音量-</button> <button>静音</button> <br><br> <button>全屏</button> <button>上一曲</button> <button>下一曲</button> </div> <script> //定义数组保存歌曲 var songs=[ "像风一样自由", "北京的冬天", "吻得太逼真", "最浪漫的事", "成都" ]; //获取 var oA=document.getElementsByTagName("a"); var btn=document.getElementsByTagName("button"); var audio=document.getElementsByTagName("audio")[0]; //遍历所有a 给每一个a绑定双击事件 var a; for(var i=0;i<oA.length;i++){ oA[i].index=i;//设置下标 oA[i].ondblclick=function(){ a=this.index; play1(a) } } //定义播放函数 function play1(n){ audio.src="mp3/"+songs[n]+".mp3"; audio.play(); //先让所有a的类名清空 for(var i=0;i<oA.length;i++){ oA[i].className=""; } oA[n].className="tu"; } //为按钮绑定事件 btn[0].onclick=function(){ audio.play(); } btn[1].onclick=function(){ audio.pause(); } //快进 快退 btn[2].onclick=function(){ audio.currentTime+=5; } btn[3].onclick=function(){ audio.currentTime-=5; } //音量 + - btn[4].onclick=function(){ audio.volume+=0.1; } btn[5].onclick=function(){ audio.volume-=0.1; } //静音 btn[6].onclick=function(){ audio.muted=!audio.muted; if(audio.muted){ btn[6].innerHTML="取消静音"; }else{ btn[6].innerHTML="静音"; } } //上一曲 下一曲 btn[8].onclick=function(){ a--; if(a<0){ a=oA.length-1; } play1(a); } btn[9].onclick=function(){ a++; if(a==oA.length){ a=0; } play1(a); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- play() : 媒体播放 pause() : 媒体暂停 load() : 重新加载媒体 --> <video src="少女时代.mkv" controls width="700px" poster="bg0.jpg"></video> <button>测试</button> <br> <button>播放</button> <button>重新加载</button> <script> // var btn=document.getElementsByTagName("button"); var video=document.getElementsByTagName("video")[0]; btn[0].onclick=function(){ console.log("是否暂停"+video.paused); console.log("是否播放完毕"+video.ended); console.log("媒体发生错误时"+video.error); console.log("返回媒体地址："+video.currentSrc); } //播放暂停 btn[1].onclick=function(){ if(video.paused){ video.play(); btn[1].innerHTML="暂停" }else{ video.pause(); btn[1].innerHTML="播放" } } btn[2].onclick=function(){ video.load();//重新加载 } //ended 事件 video.onended=function(){//当媒体播放完毕的时候 alert("我播放完了") } //ontimeupdate 事件 当播放位置发生改变的时候 var a=0; video.ontimeupdate=function(){ a++; console.log(a); } </script> </body> </html>
标签：ges index padding use ons tle 绑定 div 取消
原文地址：http://www.cnblogs.com/maoking/p/7392625.html
