html5聲頻audio和視訊video

zting科技發表於2017-01-10

 html5作為下一代web標準,年前軒起了html5熱潮。對於html5我只是本著瞭解看看。關於html5和RIA(silverlight,flash,JavaFx等)我不想說什麼,也沒有什麼可說的,存在就有其存在的理由。孰優孰劣,留給事實、時間來證明的。

     在html5中出現了一些新特性:

  • canvas 元素
  • 視訊 video 和 聲頻audio 元素 ;
  • 對本地離線儲存(localStorage,sessionStorage)的支援 ;
  • 新增特殊內容元素:article、footer、header、nav、section ;
  • 新增表單控制元件: calendar、date、time、email、url、search 。

    今天看看視訊和聲頻:在html5中規定了視訊的標準方法:video

<video src="xxx.ogg" controls="controls">你的瀏覽器還不支援哦</video>
  我們也可以設定多個source,瀏覽器會為我們選擇第一個可識別的視訊來播放,形如:
<video width="320" height="240" controls="controls">  
<source src="xxx.ogg" type="video/ogg"> 
 <source src="xx1.mp4" type="video/mp4">
你的瀏覽器還不支援哦</video>
video屬性有:
屬性 描述
autoplay autoplay 如果出現該屬性,則視訊在就緒後馬上播放。
controls controls 如果出現該屬性,則向使用者顯示控制元件,比如播放按鈕。
height 畫素 設定視訊播放器的高度。
loop loop 如果出現該屬性,則當媒介檔案完成播放後再次開始播放。
preload preload

如果出現該屬性,則視訊在頁面載入時進行載入,並預備播放。

如果使用 “autoplay”,則忽略該屬性。

src url視訊地址 要播放的視訊的 URL。
width 畫素 設定視訊播放器的寬度。

autobuffer

Autobuffer

(自動緩衝)

在網頁顯示時,該二進位制屬性表示是由使用者代理(瀏覽器)自動緩衝的內容,還是由使用者使用相關API進行內容緩衝

poster

url圖片地址

 

當視訊未響應或緩衝不足時,該屬性值連結到一個影像。該影像將以一定比例被顯示出來

在HTML5 規定了聲頻標準為 audio 元素,audio 元素能夠播放聲音檔案或者音訊流。

audio格式和video相似:直接行多source:

<audio controls="controls">
  <source src="xx.ogg" type="audio/ogg">
  <source src="xx1.mp3" type="audio/mpeg">
你的瀏覽器還不支援哦
</audio>
其屬性比video少了height、width、poster。
在我們的開發中多媒體越來越重要,html5出現了這些video和audio。

我的html5系列:

  1. html5聲頻audio和視訊video
  2. html5-Canvas繪圖
  3. html5之Canvas座標變換應用-時鐘例項
  4. html5-web本地儲存
本文轉自破狼部落格園部落格,原文連結:http://www.cnblogs.com/whitewolf/archive/2011/02/28/1967456.html,如需轉載請自行聯絡原作者


相關文章