html5聲頻audio和視訊video
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系列:
本文轉自破狼部落格園部落格,原文連結:http://www.cnblogs.com/whitewolf/archive/2011/02/28/1967456.html,如需轉載請自行聯絡原作者
相關文章
- HTML5視訊videoHTMLIDE
- HTML5播放video或者audioHTMLIDE
- HTML5 video視訊字幕的使用和製作HTMLIDE
- HTML5 Audio & Video 屬性解析HTMLIDE
- HTML5 video audio 元素詳解HTMLIDE
- audio和video元素IDE
- HTML5視訊video開發demo例子HTMLIDE
- HTML5 Audio & Video - 相容性總結(一)HTMLIDE
- WebView 視訊全屏播放(基於Html5 video)WebViewHTMLIDE
- 掌握HTML5中的多媒體–視訊(video)HTMLIDE
- HTML5 音訊和視訊HTML音訊
- HTML5 Audio(音訊)簡介HTML音訊
- HTML5音訊audio屬性HTML音訊
- HTML5音訊audio詳解HTML音訊
- html5學習(二)音訊audioHTML音訊
- audio 應用:聲波通訊(3)接收原理
- 使用vue控制video視訊和彈幕功能VueIDE
- audio 應用:聲波通訊(2)傳送原理
- HTML video 播放本地視訊HTMLIDE
- audio元素和video元素在ios和andriod觸屏播放IDEiOS
- html5視訊HTML
- Native Audio and Native VideoIDE
- audio 應用:聲波通訊(1)應用場景
- video.js+jquery+視訊雲IDEJSjQuery
- 掌握HTML5中的多媒體–音訊(audio)HTML音訊
- html5 audio整理HTML
- AceThinker Video Keeper 視訊下載工具IDE
- html5–移動端視訊video的android相容,去除播放控制元件、全屏等HTMLIDEAndroid控制元件
- 視訊下載和轉換工具:Xilisoft YouTube Video Converter macIDEMac
- video自定義實現視訊播放功能IDE
- Movavi Video Editor Plus 22,視訊處理IDE
- IOS音視訊(四十三)AVFoundation 之 Audio SessioniOSSession
- 超聲波網路 (TCP/IP on Audio)TCP
- 微信小程式 Video 視訊太小怎麼辦微信小程式IDE
- TunesKit AceMovi Video Editor for Mac(視訊編輯工具)IDEMac
- Movavi Video Editor Plus for Mac視訊編輯器IDEMac
- Cisdem Video Player for mac(高清視訊播放器)IDEMac播放器
- Tipard Video Converter Ultimate如何旋轉視訊?IDE