1. 程式人生 > >h5的video和audio標籤等的使用及相容

h5的video和audio標籤等的使用及相容

如何在所有主流瀏覽器中啟用<video>和<audio>標記

要使HTML5視訊和音訊標籤適用於所有主流瀏覽器,只需在文件的<head>中的某處新增以下程式碼行即可。

<script src="//api.html5media.info/1.2.2/html5media.min.js"></script>

 

如何嵌入視訊

您可以使用以下程式碼將視訊嵌入到您的頁面中。

<video src="video.mp4" width="320" height="200" controls preload></video>

 

如何嵌入音訊

您可以使用以下程式碼將音訊嵌入到頁面中。

<audio src="audio.mp3" controls preload></audio>

 

視訊格式: 
格式 MIME-type 
MP4 video/mp4 
WebM video/webm 
Ogg video/ogg

HTML5 中的新屬性: 
屬性 值 描述 
autoplay autoplay 如果出現該屬性,則視訊在就緒後馬上播放。 
controls controls 如果出現該屬性,則向用戶顯示控制元件,比如播放按鈕。 
height pixels 設定視訊播放器的高度。 
loop loop 如果出現該屬性,則當媒介檔案完成播放後再次開始播放。 
muted muted 規定視訊的音訊輸出應該被靜音。 
poster URL 規定視訊下載時顯示的影象,或者在使用者點選播放按鈕前顯示的影象( poster

= poster.jpg )。 
preload preload 如果出現該屬性,則視訊在頁面載入時進行載入,並預備播放(預載入)。 
如果使用 “autoplay”,則忽略該屬性。 
src url 要播放的視訊的 URL。 
width pixels 設定視訊播放器的寬度。

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

可以通過 addEventListener 監聽視訊的ended事件,監聽結束時間,進行結束,跳轉的操作等

官方文件: https://html5media.info/