我的啟蒙--HTML5 第二章 音頻視頻
阿新 • • 發佈：2017-08-19
事件 尺寸 自動播放 erro use elements 發送 load 媒體
音頻視頻
標簽如下
(1)audio音頻
(2)video視頻
媒體元素屬型
controls : 顯示或隱藏用戶控制界面
autoplay : 媒體是否自動播放
loop : 媒體是否循環播放
currentTime : 開始到播放現在所用的時間
duration : 媒體總時間(只讀)
volume : 0.0-1.0的音量相對值
muted : 是否靜音
paused : 媒體是否暫停(只讀)
ended : 媒體是否播放完畢(只讀)
error : 媒體發生錯誤的時候，返回錯誤代碼 (只讀)
currentSrc : 以字符串的形式返回媒體地址(只讀)
play() : 媒體播放
pause() : 媒體暫停
load() : 重新加載媒體
Media事件
onended：當媒介已到達結尾時運行的腳本（可發送類似“感謝觀看”之類的消息）。
ontimeupdate：當播放位置改變時（比如當用戶快進到媒介中一個不同的位置時）運行的腳本
Video額外特性
poster : 視頻播放前的預覽圖片 eg:oV.poster = ‘timg.jpg‘
width、height : 設置視頻的尺寸
videoWidth、 videoHeight : 視頻的實際尺寸(只讀)
下面是自定義音頻的代碼,基本把所以的功能都做上了,但是主要用的是Js,誰讓他們不分家,沒辦法
<!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>
謹記當初奮鬥的自己,是他讓現在的自己,享受美好, 敬給還在奮鬥的你們,望與君共勉.
我的啟蒙--HTML5 第二章 音頻視頻