HTML5之音頻audio知識（部分vedio）
HTML總結（二）【HTML5之音頻】javascript
HTML5重點知識之音頻
audio標籤兼容性：
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 標籤。 註釋：Internet Explorer 8 以及更早的版本不支持 <audio> 標籤。
audio的經常使用屬性：
src：音樂的URL preload：預加載 autoplay：自動播放 loop：循環播放 controls：瀏覽器自帶的控制條 duration： 返回媒體的播放總時長，單位秒 currentTime： 當前播放的時間，單位秒 buffered： 返回緩衝部件的時間範圍(TimeRanges對象) loop： 是否循環播放 volume： 音量值
audio繼承media的屬性
audioTracks 返回可用的音軌列表（MultipleTrackList對象） autoplay 媒體加載後自動播放 controller 返回當前的媒體控制器（MediaController對象） controls 顯示播控控件 crossOrigin CORS設置 currentSrc 返回當前媒體的URL defaultMuted 缺省是否靜音 defaultPlaybackRate 播控的缺省倍速 ended 返回當前播放是否結束標誌 error 返回當前播放的錯誤狀態 initialTime 返回初始播放的位置 mediaGroup 當前音視頻所屬媒體組 (用來連接多個音視頻標籤) muted 是否靜音 networkState 返回當前網絡狀態 paused 是否暫停 playbackRate 播放的倍速 played 當前播放部件已經播放的時間範圍(TimeRanges對象) preload 頁面加載時是否同時加載音視頻 readyState 返回當前的準備狀態 seekable 返回當前可跳轉部件的時間範圍(TimeRanges對象) seeking 返回用戶是否作了跳轉操做 startOffsetTime 返回當前的時間偏移(Date對象) textTracks 返回可用的文本軌跡(TextTrackList對象) videoTracks 返回可用的視頻軌跡(VideoTrackList對象)
audio的方法：
load(); //加載 play();//播放 pause();//暫停 stop();//暫停
audio的事件(點擊具體事件可查看案例)：
當音頻/視頻處於加載過程當中時，會依次發生如下事件：loadstart>durationchange>loadedmetadata>loadeddata>progress>canplay>canplaythrough
注： audio和video同屬於media因此不少事件都相同，因此使用同一個案例 每次刷新的時候，觸發加載過程當中的七種事件 代碼來源於http://www.w3school.com.cn/tiy/t.asp?f=html5_av_event_canplay【修改了少部分】
javascript監聽audio事件的三種方法
第一種：<audio|video onloadstart="SomeJavaScriptCode">
第二種：audio|video.onloadstart=SomeJavaScriptCode;
第三種：使用 addEventListener()：
audio|video.addEventListener("loadstart", function()
{
//SomeJavaScriptCode
}
);
loadstart 當瀏覽器開始加載媒介數據時運行腳本
<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤
</video>
<script>
myVid=document.getElementById("video1");
myVid.onloadstart=alert("視頻已經加載完畢觸發loadstart事件！可是由於alert中斷而沒有播放，當你點擊alert確認鍵或者關閉alert時候，視頻就會開始播放。");
</script>
</body>
</html>
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤html
durationchange 當媒介長度改變時運行腳本
<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤
</video>
<script>
myVid=document.getElementById("video1");
myVid.ondurationchange=alert("視頻已經加載完畢觸發durationchange事件！可是由於alert中斷而沒有播放，當你點擊alert確認鍵或者關閉alert時候，視頻就會開始播放。");
</script>
</body>
</html>
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤html5
loadedmetadata 當媒介元素的持續時間以及其餘媒介數據已加載時運行腳本
具體案例請複製loadstart或者canplay事件，重複性工做再也不累贅書寫
onloadeddata 當加載媒介數據時運行腳本
具體案例請複製loadstart或者canplay事件，重複性工做再也不累贅書寫
progress 當瀏覽器正在取媒介數據時運行腳本
具體案例請複製loadstart或者canplay事件，重複性工做再也不累贅書寫
canplay 當媒介可以開始播放但可能因緩衝而須要中止時運行腳本
<html>
<body>
<video id="video1" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤
</video>
<script>
myVid=document.getElementById("video1");
myVid.oncanplay=function(){alert("視頻已經加載完畢觸發canplay事件！可是由於alert中斷而沒有播放，當你點擊alert確認鍵或者關閉alert時候，視頻就會開始播放。");}
</script>
</body>
</html>
注意：由於前面依次觸發了三個事件，因此這裏時間段裏已經不須要緩衝中止，這個事件不被觸發，若是要測試請單獨測試這個功能。
緣由一：博客插入視頻/音頻方法不對或者不支持。緣由二你的瀏覽器不支持audio標籤java
canplaythrough 當媒介可以無需因緩衝而中止便可播放至結尾時運行腳本
具體案例請複製loadstart或者canplay事件，重複性工做再也不累贅書寫瀏覽器
emptied 當媒介資源元素忽然爲空時（網絡錯誤、加載錯誤等）運行腳本
emptied這個事件不經常使用，若是遇到異常能夠用其餘事件代替。網絡
ended 當媒介已抵達結尾時運行腳本
<html>
<body>
<div>當視頻播放完之後觸發alert事件"這個視頻播放結束！"</div>
<video id="video_ended" controls="controls">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video_ended");
myVid.addEventListener("ended", function()
{
alert("這個視頻播放結束！");
}
);
</script>
</body>
</html>
當視頻播放完之後觸發alert事件"這個視頻播放結束！"ide
Your browser does not support HTML5 video.oop
error 當在元素加載期間發生錯誤時運行腳本
瀏覽器支持：只有 Internet Explorer 9 支持 error 屬性。
audio|video.error.code
MediaError 對象的 code 屬性返回一個數字值，它表示音頻/視頻的錯誤狀態：
1 = MEDIA_ERR_ABORTED - 取回過程被用戶停止
2 = MEDIA_ERR_NETWORK - 當下載時發生錯誤
3 = MEDIA_ERR_DECODE - 當解碼時發生錯誤
4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音頻/視頻
<html>
<body>
<button onclick="getError()" type="button">得到錯誤狀態</button>
<br />
<br />
<video id="video1" controls="controls" autoplay="autoplay">
<source src="/example/html5/mov_broken.mp4" type="video/mp4">
<source src="/example/html5/mov_broken.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getError()
{
alert(myVid.error.code);
}
</script>
</body>
</html>
pause 當媒介數據暫停時運行腳本
這個很簡單，就是發生暫停事件被觸發。在pause()方法被執行的時候觸發起來比較容易。
例如：一下的pauseBtn被點擊的時候觸發了pause事件，執行 alert("音頻暫停播放");
<audio id="myAudio" controls="controls" autoplay="autoplay">
<button id ="pauseBtn">暫停audio</button>
var aud = document.getElementById("myAudio");
pauseBtn.onclick = function(){
aud.pause();
}
aud.onpause = function() {
alert("音頻暫停播放");
};
play 當媒介數據將要開始播放時運行腳本
案例參照pause事件，再也不累贅書寫。
playing 當媒介數據已開始播放時運行腳本
案例參照loadstart事件，再也不累贅書寫。
ratechange 當媒介數據的播放速率改變時運行腳本
通常來講是當用戶切換到慢動做或快進模式時候觸發。
readystatechange 當就緒狀態（ready-state）改變時運行腳本
就緒狀態監測媒介數據的狀態
seeked 當媒介元素的定位屬性 [1] 再也不爲真且定位已結束時運行腳本
seeking 當媒介元素的定位屬性爲真且定位已開始時運行腳本
stalled 當取回媒介數據過程當中（延遲）存在錯誤時運行腳本
suspend 當瀏覽器已在取媒介數據但在取回整個媒介文件以前中止時運行腳本
timeupdate 當媒介改變其播放位置時運行腳本
volumechange 當媒介改變音量亦或當音量被設置爲靜音時運行腳本
當音量變化的時候觸發該事件
waiting 當媒介已中止播放但打算繼續播放時運行腳本
相關文章
- 1. HTML5 Audio(音頻)
- 2. HTML5視頻Video 音頻Audio
- 3. HTML5音頻API Web Audio
- 4. html5 音頻和視頻（audio And video）
- 5. HTML5 屬性視頻video 音頻audio
- 6. HTML5——音頻audio與視頻video
- 7. HTML5-音頻audio和視頻video標籤
- 8. HTML5——多媒體：audio音頻、video視頻
- 9. html5 vedio
- 10. HTML5-定製音頻播放器-audio
- 更多相關文章...
- • ionic 頭部與底部 - ionic 教程
- • ionic 頭部和底部 - ionic 教程
- • Git五分鐘教程
- • 算法總結-二分查找法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
