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 Audio & Video 屬性解析HTMLIDE
- HTML5 video audio 元素詳解HTMLIDE
- HTML5 video視訊字幕的使用和製作HTMLIDE
- HTML5 Audio & Video - 相容性總結(一)HTMLIDE
- WebView 視訊全屏播放(基於Html5 video)WebViewHTMLIDE
- HTML5 Audio(音訊)簡介HTML音訊
- Native Audio and Native VideoIDE
- ffmpeg Video and Audio grabbingIDE
- html5 audio整理HTML
- audio 應用:聲波通訊(3)接收原理
- 使用vue控制video視訊和彈幕功能VueIDE
- audio 應用:聲波通訊(2)傳送原理
- audio 應用:聲波通訊(1)應用場景
- html5–移動端視訊video的android相容,去除播放控制元件、全屏等HTMLIDEAndroid控制元件
- 初識HTML5 Web Audio APIHTMLWebAPI
- 視訊下載和轉換工具:Xilisoft YouTube Video Converter macIDEMac
- Allavsoft Video Downloader Converter for Mac(視訊下載和格式轉換)IDEMac
- HTML5如何監聽video的全屏和退出全屏?HTMLIDE
- AceThinker Video Keeper 視訊下載工具IDE
- Movavi Video Suite 2022視訊編輯IDEUI
- TunePat Netflix Video Downloader——Netflix視訊工具IDE
- video自定義實現視訊播放功能IDE
- Cisdem Video Converter Mac視訊轉換器IDEMac
- 視訊編輯工具:VideoPad Video Editor MacIDEMac
- Tipard Video Converter Ultimate如何旋轉視訊?IDE
- Movavi Video Editor Plus 22,視訊處理IDE
- Allavsoft Video Downloader Converter 視訊下載工具IDE
- IOS音視訊(四十三)AVFoundation 之 Audio SessioniOSSession
- HTML5中Audio使用踩坑彙總HTML
- HTML5的新特性——語義化標籤、多媒體標籤(video、audio)、input型別、表單屬性HTMLIDE型別
- Video GIF converter for Mac(gif視訊轉換器)IDEMac
- Cisdem Video Player for mac(高清視訊播放器)IDEMac播放器
- Movavi Video Editor Plus 2022 視訊編輯器IDE
- Movavi Video Editor Plus 2022 視訊編輯器IDE
- VideoPad Video Editor for Mac(視訊編輯工具)11.02IDEMac
- Allavsoft Video Downloader Converter for Mac(視訊下載工具)IDEMac
- Cinematic Video Effects for Mac視訊調色軟體IDEMac
- Movavi Video Editor Plus for Mac視訊編輯器IDEMac
- TunesKit AceMovi Video Editor for Mac(視訊編輯工具)IDEMac