html5-深入淺出(2)


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 屬性,在谷歌瀏覽器中靜音狀態下是可以自動播放的。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM