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

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之sessionStorage對象

HTML5的video標簽操作視頻詳解

以上就是HTML5中audio與video標簽的使用 的詳細內容，更多請關注php中文網其它相關文章！