audio
標簽定義聲音,比如音樂或其他音頻流。改標簽內含有的屬性以及兼容性(已火狐和谷歌為例)
<!-- autoplay 自動播放 (火狐支持 瀏覽器兼容 谷歌不支持) muted 規定視頻輸出應該被靜音 (都支持) loop 則每當音頻結束時重新開始播放(都支持) preload 如果出現該屬性,則音頻在頁面加載時進行加載,並預備播放。如果使用 "autoplay",則忽略該屬性。(都支持) controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕。(都支持) -->
<audio src="南屏晚鍾.mp3" controls muted autoplay > 您的瀏覽器不支持 </audio>
再上面瀏覽器中 火狐音頻所有屬性都支持的,谷歌不支持自動播放,(除了谷歌都支持),而且在ie8中打開只顯示您的瀏覽器不支持,因為ie8就是不支持。而且視頻格式分為很多種,瀏覽器支持的也不同,我們可以用source 引入。支持什么格式引入什么格式的文件,都不支持那就是您的瀏覽器不支持了。
<audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> 你的瀏覽器不支持 </audio>
video
標簽定義視頻,比如電影片段或其他視頻流。引入資源與屬性與音頻基本相同、自動播放除了谷歌其余都是可以的。
<!-- autoplay 如果出現該屬性,則視頻在就緒后馬上播放。 controls 如果出現該屬性,則向用戶顯示控件,比如播放按鈕 height 設置視頻播放器的高度 loop 如果出現該屬性,則當媒介文件完成播放后再次開始播放 muted 規定視頻的音頻輸出應該被靜音 poster 規定視頻下載時顯示的圖像,或者在用戶點擊播放按鈕前顯示的圖像 preload 如果出現該屬性,則視頻在頁面加載時進行加載,並預備播放。如果使用 "autoplay",則忽略該屬性。 width 設置視頻播放器的寬度 -->
<video width="300" height="300" src="Passenger - Restless Wind.mp4" controls autoplay></video>
備注:谷歌的自動播放也可以做 我們加上 muted 屬性,在谷歌瀏覽器中靜音狀態下是可以自動播放的。