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之sessionStorage物件

HTML5的video標籤操作影片詳解

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