這篇文章主要介紹了關於HTML5中audio與video標籤的使用,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
最近做的微信分享頁面中有大量的語音播放和視訊展示,相關的好多方法屬性以前都沒接觸過,現在記錄下來!
1. 首先,了解兩個標籤的基本資訊:
兩個標籤的基本屬性:
## 傳回表示可用視訊軌道的VideoTrackList 物件volume設定或傳回音訊/視訊的音量屬性 | 描述 |
---|---|
#audioTracks | 傳回表示可用音軌的AudioTrackList 物件 |
autoplay | 設定或返回是否在載入完成後隨即播放音訊/視訊 |
buffered | 返回表示音訊/視訊已緩衝部分的TimeRanges 物件 |
controller | 傳回表示音訊/視訊目前媒體控制器的MediaController 物件 |
#controls | 設定或返回音訊/視訊是否顯示控制項(例如播放/暫停等) |
crossOrigin | 設定或傳回音訊/視訊的CORS 設定 |
currentSrc | 傳回目前音訊/視訊的URL |
currentTime | #設定或返回音訊/視訊中的目前播放位置(以秒計) |
defaultMuted | 設定或傳回音訊/視訊預設是否靜音 |
defaultPlaybackRate | 設定或傳回音訊/視訊的預設播放速度 |
#duration | 傳回目前音訊/視訊的長度(以秒計) |
ended | 傳回音訊/視訊的播放是否已結束 |
#error | 傳回表示音訊/視訊錯誤狀態的MediaError物件 |
loop | 設定或返回音訊/視訊是否應在結束時重新播放 |
mediaGroup | 設定或傳回音訊/視訊所屬的組合(用於連接多個音訊/視訊元素) |
#muted | 設定或傳回音訊/視訊是否靜音 |
networkState | 返回音訊/視訊的目前網路狀態 |
#paused | 設定或傳回音訊/視訊是否暫停 |
playbackRate | 設定或傳回音訊/視訊播放的速度 |
played | 返回表示音訊/視訊已播放部分的TimeRanges 物件 |
preload | 設定或返回音訊/視訊是否應該在頁面載入後進行載入 |
#readyState | 傳回音訊/視訊目前的就緒狀態 |
#seekable | 傳回表示音訊/視訊可尋址部分的TimeRanges 物件 |
seeking | 傳回使用者是否正在音訊/視訊中進行查找 |
src | 設定或傳回音訊/視訊元素的目前來源 |
#startDate | 傳回表示目前時間偏移的Date物件 |
textTracks | 傳回表示可用文字軌道的TextTrackList 物件 |
videoTracks | |
兩個標籤中的事件:
2. 在專案中的使用:在影片沒有載入出來的時候需要顯示這個影片的第一幀圖片,我這裡第一幀圖片是後台傳過來的,查了相關資料原來video標籤有個屬性poster專門用來顯示影片的第一格圖片,相當於影片封面圖。 poster 屬性用於設定或傳回影片的 poster 屬性值。這個屬性描述了在影片載入時或在使用者點擊播放按鈕前顯示的圖片。如果不包含該屬性,影片的第一幀將被用來代替顯示。
1 2 3 4 5 6 7 |
|
在音頻播放的時候瀏覽器不一定支援該種類型的音頻,所以要做一個判斷:用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類型。 canPlayType() 方法可傳回下列數值之一:
"probably" - 瀏覽器最可能支援該音訊/視訊類型
"maybe" - 瀏覽器或許支援該音訊/視訊類型
"" - (空白字串)瀏覽器不支援該音訊/視訊類型
使用語法:
1 |
|
相關推薦:
事件 | 描述 |
---|---|
#abort | 當音訊/視訊的載入已放棄時 |
canplay | 當瀏覽器可以播放音訊/視訊時 |
canplaythrough | 當瀏覽器可在不因緩衝而停頓的情況下進行播放時 |
durationchange | #當音訊/視訊的長度已更改時 |
emptied | 當目前的播放清單為空白時 |
ended | 當目前的播放清單已結束時 |
error | 當在音訊/視訊載入期間發生錯誤時 |
#loadeddata | 當瀏覽器已載入音訊/視訊的當前幀時 |
loadedmetadata | 當瀏覽器已載入音訊/視訊的元資料時 |
loadstart | #當瀏覽器開始尋找音訊/視訊時 |
pause | #當音訊/視訊已暫停時 |
play | 當音訊/視訊已開始或不再暫停時 |
#playing | 當音訊/視訊在已因緩衝而暫停或停止後已就緒時 |
progress | #當瀏覽器正在下載音訊/視訊時 |
當影片因為需要緩衝下一幀而停止 |
以上是HTML5中audio與video標籤的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!