html5聲頻audio和視頻video等新特性詳細(xì)說(shuō)明_HTML5教程
推薦:html5 button autofocus 屬性介紹及應(yīng)用在html 5中,可以設(shè)置當(dāng)頁(yè)面加載時(shí),自動(dòng)焦點(diǎn)到達(dá)某個(gè)控件中,這個(gè)就是autofocus屬性了,接下來(lái)詳細(xì)介紹,有需求的朋友可以了解下
HTML5/">html5作為下一代web標(biāo)準(zhǔn),年前軒起了html5熱潮。對(duì)于html5我只是本著了解看看。關(guān)于html5和RIA(silverlight,flash,JavaFx等)我不想說(shuō)什么,也沒(méi)有什么可說(shuō)的,存在就有其存在的理由。孰優(yōu)孰劣,留給事實(shí)、時(shí)間來(lái)證明的。在html5中出現(xiàn)了一些新特性:
canvas 元素 視頻 video 和 聲頻audio 元素 ;
對(duì)本地離線存儲(chǔ)(localStorage,sessionStorage)的支持 ;
新增特殊內(nèi)容元素:article、footer、header、nav、section ;
新增表單控件: calendar、date、time、email、url、search 。
今天看看視頻和聲頻:在html5中規(guī)定了視頻的標(biāo)準(zhǔn)方法:video
<video src="xxx.ogg" controls="controls">你的瀏覽器還不支持哦</video> 我們也可以設(shè)置多個(gè)source,瀏覽器會(huì)為我們選擇第一個(gè)可識(shí)別的視頻來(lái)播放,形如:<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 | 如果出現(xiàn)該屬性,則視頻在就緒后馬上播放。 |
controls | controls | 如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕。 |
height | 像素 | 設(shè)置視頻播放器的高度。 |
loop | loop | 如果出現(xiàn)該屬性,則當(dāng)媒介文件完成播放后再次開(kāi)始播放。 |
preload | preload |
如果出現(xiàn)該屬性,則視頻在頁(yè)面加載時(shí)進(jìn)行加載,并預(yù)備播放。 如果使用 "autoplay",則忽略該屬性。 |
src | url視頻地址 | 要播放的視頻的 URL。 |
width | 像素 | 設(shè)置視頻播放器的寬度。 |
autobuffer |
Autobuffer (自動(dòng)緩沖) |
在網(wǎng)頁(yè)顯示時(shí),該二進(jìn)制屬性表示是由用戶代理(瀏覽器)自動(dòng)緩沖的內(nèi)容,還是由用戶使用相關(guān)API進(jìn)行內(nèi)容緩沖 |
poster |
url圖片地址 |
當(dāng)視頻未響應(yīng)或緩沖不足時(shí),該屬性值鏈接到一個(gè)圖像。該圖像將以一定比例被顯示出來(lái) |
在HTML5 規(guī)定了聲頻標(biāo)準(zhǔn)為 audio 元素,audio 元素能夠播放聲音文件或者音頻流。
audio格式和video相似:直接行多source:
復(fù)制代碼 代碼如下:m.dounai2.com
<audio controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx1.mp3" type="audio/mpeg">
你的瀏覽器還不支持哦
</audio>其屬性比video少了height、width、poster。在我們的開(kāi)發(fā)中多媒體越來(lái)越重要,html5出現(xiàn)了這些video和audio。
分享:html5之Canvas路徑繪圖、坐標(biāo)變換應(yīng)用實(shí)例本文寫(xiě)一個(gè)html5的時(shí)鐘應(yīng)用程序試手主要設(shè)置了坐標(biāo)變換的平移(translate)和旋轉(zhuǎn)變換(ratate),以及html5 Canvas的路徑繪圖,beginPath,closePath,rect,arc等多的也不說(shuō)了,直接上代碼有需要的朋友可以參考下
相關(guān)HTML5教程:
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定:body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類(lèi)型和email類(lèi)型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- html5拖曳操作 HTML5實(shí)現(xiàn)網(wǎng)頁(yè)元素的拖放操作
- html5 canvas 畫(huà)圖教程案例分析
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- html5 svg 中元素點(diǎn)擊事件添加方法
- HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- 使用CSS實(shí)現(xiàn)彈性視頻html5案例實(shí)踐
- 淺談three.js中的needsUpdate的應(yīng)用
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- html5的新玩法——語(yǔ)音搜索
- 相關(guān)鏈接:
- 教程說(shuō)明:
HTML5教程-html5聲頻audio和視頻video等新特性詳細(xì)說(shuō)明。