HTML5中audio與video標籤的使用

不言
發布: 2018-04-27 14:09:24
原創
2809 人瀏覽過

這篇文章主要介紹了關於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
兩個標籤的基本方法:

方法描述addTextTrack()向音頻/影片新增新的文字軌道canPlayType()檢測瀏覽器是否能播放指定的音訊/視訊類型load()重新載入音訊/視訊元素play()開始播放音訊/視訊#pause()暫停目前播放的音訊/視訊#


兩個標籤中的事件:

##ratechange 當音訊/視訊的播放速度已更改時seeked當用戶已移動/跳躍到音訊/視訊中的新位置時seeking當使用者開始移動/跳躍到音訊/視訊中的新位置時stalled當瀏覽器嘗試獲取媒體數據,但數據不可用時suspend當瀏覽器刻意不獲取媒體數據時timeupdate當目前的播放位置已更改時#volumechange當音量已更改時waiting#


2.  在專案中的使用:在影片沒有載入出來的時候需要顯示這個影片的第一幀圖片,我這裡第一幀圖片是後台傳過來的,查了相關資料原來video標籤有個屬性poster專門用來顯示影片的第一格圖片,相當於影片封面圖。 poster 屬性用於設定或傳回影片的 poster 屬性值。這個屬性描述了在影片載入時或在使用者點擊播放按鈕前顯示的圖片。如果不包含該屬性,影片的第一幀將被用來代替顯示。

<p class="newsInfo" v-for=" item in newsFragment">
<p class="text">{{item.fragment_text_describe}}</p>
<p v-if="item.fragmentFile" v-for="items in item.fragmentFile">
<img v-if="items.fragment_type==1" :src="items.fragment_url" alt="">
<video v-else :poster="items.fileCover" controls :src="items.fragment_url"></video>
</p>
</p>
登入後複製

在音頻播放的時候瀏覽器不一定支援該種類型的音頻,所以要做一個判斷:用canPlayType() 方法檢查瀏覽器是否能播放指定的音頻/視頻類型。 canPlayType() 方法可傳回下列數值之一:
        "probably" - 瀏覽器最可能支援該音訊/視訊類型
        "maybe" - 瀏覽器或許支援該音訊/視訊類型

        "" - (空白字串)瀏覽器不支援該音訊/視訊類型

使用語法:

audio.canPlayType("mp3"))
登入後複製

相關推薦:

# 深入了解HTML5之sessionStorage物件

HTML5的video標籤操作影片詳解

事件 描述
#abort 當音訊/視訊的載入已放棄時
canplay 當瀏覽器可以播放音訊/視訊時
canplaythrough 當瀏覽器可在不因緩衝而停頓的情況下進行播放時
durationchange #當音訊/視訊的長度已更改時
emptied 當目前的播放清單為空白時
ended 當目前的播放清單已結束時
error 當在音訊/視訊載入期間發生錯誤時
#loadeddata 當瀏覽器已載入音訊/視訊的當前幀時
loadedmetadata 當瀏覽器已載入音訊/視訊的元資料時
loadstart #當瀏覽器開始尋找音訊/視訊時
pause #當音訊/視訊已暫停時
play 當音訊/視訊已開始或不再暫停時
#playing 當音訊/視訊在已因緩衝而暫停或停止後已就緒時
progress #當瀏覽器正在下載音訊/視訊時
當影片因為需要緩衝下一幀而停止

以上是HTML5中audio與video標籤的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!