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
preload preload 如果出現該屬性,則視訊在頁面載入時進行載入,並預備播放(預載入)。
如果使用 “autoplay”,則忽略該屬性。
src url 要播放的視訊的 URL。
width pixels 設定視訊播放器的寬度。
HTML 音訊/視訊 方法:
方法 描述
addTextTrack() 向音訊/視訊新增新的文字軌道。
canPlayType() 檢測瀏覽器是否能播放指定的音訊/視訊型別。
load() 重新載入音訊/視訊元素。
play() 開始播放音訊/視訊。
pause() 暫停當前播放的音訊/視訊。
可以通過 addEventListener 監聽視訊的ended事件,監聽結束時間,進行結束,跳轉的操作等
官方文件: https://html5media.info/