HTML5中audio與video標簽怎么用

小編給大家分享一下HTML5中audio與video標簽怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近做的微信分享頁面中有大量的語音播放和視頻展示，相關的好多方法屬性以前都沒接觸過，現在記錄下來！

1.  首先，了解關于兩個標簽的基本信息：

兩個標簽的基本屬性：

兩個標簽的基本方法：

兩個標簽中的事件：

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中audio與video標簽怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！