html5聲頻audio和視頻video等新特性詳細(xì)說明
發(fā)布時(shí)間：2012-12-26 15:48:18 作者：佚名 
我要評(píng)論
我要評(píng)論html5作為下一代web標(biāo)準(zhǔn)，年前軒起了html5熱潮;html5聲頻audio和視頻video一直被網(wǎng)友們所關(guān)注，本人也是好奇于是搜集整理一些相關(guān)的東東，需要了解的朋友可以參考下
html5作為下一代web標(biāo)準(zhǔn)，年前軒起了html5熱潮。對(duì)于html5我只是本著了解看看。關(guān)于html5和RIA（silverlight，flash，JavaFx等）我不想說什么，也沒有什么可說的，存在就有其存在的理由。孰優(yōu)孰劣，留給事實(shí)、時(shí)間來證明的。
在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í)別的視頻來播放，形如：<video width="320" height="240" controls="controls"> <source src="xxx.ogg" type="video/ogg"> <source src="xx1.mp4" type="video/mp4">你的瀏覽器還不支持哦</video>video屬性有:
在HTML5 規(guī)定了聲頻標(biāo)準(zhǔn)為 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。在我們的開發(fā)中多媒體越來越重要，html5出現(xiàn)了這些video和audio。
在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í)別的視頻來播放，形如：<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)媒介文件完成播放后再次開始播放。 |
| preload | preload |
如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。 如果使用 "autoplay"，則忽略該屬性。 |
| src | url視頻地址 | 要播放的視頻的 URL。 |
| width | 像素 | 設(shè)置視頻播放器的寬度。 |
|
autobuffer |
Autobuffer （自動(dòng)緩沖) |
在網(wǎng)頁顯示時(shí)，該二進(jìn)制屬性表示是由用戶代理（瀏覽器）自動(dòng)緩沖的內(nèi)容，還是由用戶使用相關(guān)API進(jìn)行內(nèi)容緩沖 |
|
poster |
url圖片地址 |
當(dāng)視頻未響應(yīng)或緩沖不足時(shí)，該屬性值鏈接到一個(gè)圖像。該圖像將以一定比例被顯示出來 |
在HTML5 規(guī)定了聲頻標(biāo)準(zhǔn)為 audio 元素，audio 元素能夠播放聲音文件或者音頻流。
audio格式和video相似：直接行多source：
復(fù)制代碼
代碼如下:<audio controls="controls">
<source src="xx.ogg" type="audio/ogg">
<source src="xx1.mp3" type="audio/mpeg">
你的瀏覽器還不支持哦
</audio>其屬性比video少了height、width、poster。在我們的開發(fā)中多媒體越來越重要，html5出現(xiàn)了這些video和audio。
相關(guān)文章
- 這篇文章主要介紹了HTML5新特性之type=file文件上傳功能,需要的朋友可以參考下2018-02-02
- HTML5 只有一個(gè)簡單的文檔類型：<!DOCTYPE html>，表示瀏覽器會(huì)按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標(biāo)簽，感興趣的朋友一起看看吧2017-10-31
- 這篇文章主要介紹了HTML5新特性之用SVG繪制的微信logo 的相關(guān)資料,需要的朋友可以參考下2016-02-03
- 這篇文章主要介紹了HTML5的一些新特性與Canvas的常用屬性的整理,Canvas API是HTML5中用于繪制圖形的重要內(nèi)容,需要的朋友可以參考下2016-01-29
基于HTML5新特性Mutation Observer實(shí)現(xiàn)編輯器的撤銷和回退操作
Mutation Observer（變動(dòng)觀察器）是監(jiān)視DOM變動(dòng)的接口。當(dāng)DOM對(duì)象樹發(fā)生任何變動(dòng)時(shí)，Mutation Observer會(huì)得到通知，本文給大家分享基于HTML5新特性Mutation Observer實(shí)現(xiàn)編2016-01-11HTML5 history新特性pushState、replaceState及兩者的區(qū)別
這篇文章主要介紹了HTML5 history新特性pushState、replaceState及兩者的區(qū)別 的相關(guān)資料,需要的朋友可以參考下2015-12-26- 本篇文章給大家分享html5一些有趣的新特征，非常實(shí)用，對(duì)html5新特征感興趣的朋友一起學(xué)習(xí)吧2015-12-01
Html5新特性用canvas標(biāo)簽畫多條直線附效果截圖
這篇文章主要介紹了Html5新特性用canvas標(biāo)簽畫多條直線的具體實(shí)現(xiàn)，并附效果截圖，感興趣的朋友可以參考下2014-06-30- 有好多小伙伴私聊我問我html5新特性 和用法，下面我給大家具體介紹一下html5都新加了哪些新特性，感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-13