video元素和audio元素相關事件

chanjarster 發布于2019-08-20 15:28 / 889人閱讀

摘要：前言在利用元素或元素讀取或播放媒體數據時，會觸發一系列事件，如果用腳本來捕抓這些事件，就可以對著這些事件進行處理了。捕抓的方式有兩種第一種是監聽的方式。

前言

在利用video元素或audio元素讀取或播放媒體數據時，會觸發一系列事件，如果用js腳本來捕抓這些事件，就可以對著這些事件進行處理了。

捕抓的方式有兩種：

第一種是監聽的方式。使用vedio或audio元素的addEventListener方法來對事件進行監聽，該方法可以定義如下：

vedioElement.addEventListener("error",function(){},false);

第二種是采用獲取事件句柄方式，如下：


function toPlay(){
...
};

事件介紹

事件類型	描述
loadstart	瀏覽器開始在網上尋找媒體數據
progress	瀏覽器正在獲取媒體數據
suspend	瀏覽器暫停獲取媒體數據，但是下載過程并沒有正常結束
abort	瀏覽器下載完全部媒體數據之前中止獲取媒體數據，但并不是下載錯誤引起的
error	獲取媒體數據的過程中出錯
stalled	瀏覽器嘗試獲取數據失敗
play	即將開始播放，當執行了play方法時觸發，或數據下載后元素被設置為autoplay屬性
pause	播放暫停，當執行了pause方法時觸發
loadedmetadata	瀏覽器獲取完媒體的時長和字節數
loadeddata	瀏覽器已加載完當前播放位置的媒體數據，準備播放
waiting	播放過程由于得不到下一幀而暫停播放（如下一幀尚未加載完），但很快就能夠得到下一幀
playing	正在播放
canplay	瀏覽器能夠播放媒體，但估計以當前播放速率不能直接將媒體播放完，播放期間需要緩沖
canplaythrough	瀏覽器可以播放媒體，而且以當前播放速率能夠將媒體播放完，不再需要進行緩沖
seeking	seeking屬性變為true,表明瀏覽器正在請求數據
seeked	seeking屬性變為false,表示瀏覽器停止請求數據
timeupdate	當前播放位置發生改變，可能是播放過程中的自然改變，也可能是人為的改變，或由于播放不能連續而發生的跳變
ended	播放結束后停止播放
ratechange	defaulplaybackRate屬性（默認播放速率）或playbackRate屬性（當前播放速率）發生改變
durationchange	播放時長發生改變
volumechange	volume屬性（音量）發生改變或muted屬性（靜音狀態）發生改變

demo

參考鏈接
http://www.runoob.com/jsref/d...

GPU云服務器云服務器 html相關元素 DOM元素事件任意元素和通過js和元素賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82271.html

JavaScript HTML5腳本編程——“媒體元素”的注意要點

摘要：事件除了大量屬性之外，這兩個媒體元素還可以觸發很多事件。下表列出了媒體元素相關的事件。這兩個媒體元素都有一個方法，該方法接收一種格式編解碼器字符串，返回或空字符串。 audio和video元素的用法如下：不支持音頻不支持視頻因為并非所有瀏覽器都支持所有媒體格式，所以可以指定多個不同的媒體來源。為此，不用在標簽中指定src屬性，而是要像下面這樣使用一或多個元素。 ...

baoxl 2019-08-19 17:37 評論0 收藏0
那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...

gself 2019-08-20 19:04 評論0 收藏0
那是我在夕陽下的奔跑：邊跑邊學習html5之audio與video

摘要：尤其是喬布斯在年發布的一篇的文章。喬布斯在里面寫下了關于的一點看法，說明自己為什么不使用，談到關于的一些問題，比如開放性，安全性，對于設備續航的影響，不利于觸摸屏，等等。終于，于年月日，爸爸也放棄治療了，宣布將于年正式退休。今天為大家分享一下html5中的視頻（video）與音頻（audio）。在進入主題之前我們先了解一下Flash與html5這兩種技術的時代背景與發展歷史。 1.前...

flybywind 2019-08-01 17:31 評論0 收藏0