視頻處理

在HTML5中播放視頻

• 在HTML5中播放視頻
  1.HTML5中提到最多的就是視頻處理,視頻是互聯(lián)網(wǎng)中的重要應(yīng)用.在HTML5中,添加了一個(gè)新元素,以便在HTML文檔中插入和播放視頻,這個(gè)元素就是video元素

2.video元素提供了播放,暫停和音量控制來(lái)控制視頻,也提供了width 和height 屬性來(lái)控制視頻的尺寸
(IE8以及以前的版本不支持)

3.使用video元素至少要提供兩種視頻格式的文件:OGG和MP4

OGG:包含Theora視頻和Vorbis音頻解碼器
MP4:采用H.264視頻和AAC音頻解碼器

• video元素
  1.video元素可以實(shí)現(xiàn)在HTML頁(yè)面中嵌入視頻內(nèi)容,該元素的屬性可以設(shè)置為是否自動(dòng)播放,預(yù)加載及視頻高寬等

<video width="360" height="240" src="source/video.mp4">
     視頻不能播放
</video>

src屬性:用于讀取媒體文件
autoplay屬性:設(shè)置該視頻是否自動(dòng)播放
width 和height 屬性:設(shè)置該視頻的寬度和高度

2.video元素中可以使用source元素來(lái)向?yàn)g覽器提供備選視頻格式

<video width="360" height="240">
   <source src="source/video.mp4/">
   <source src="source/video.ogg/">
視頻不能播放
</video>

(source元素中的src屬性和video元素屬性作用相同,都是用于讀取媒體文件)
注:使用source元素讀取流媒體,video元素不需要使用src屬性

• video屬性,video元素具備以下屬性

controls:該屬性是video元素特有屬性,用于顯示瀏覽器所提供的視頻控件按鈕

<video width="360" height="240"
          src="source/video.mp4"autoplay controls>
        視頻不能播放
</video>

(autoplay設(shè)置這個(gè)屬性時(shí),加載視頻后自動(dòng)播放)
poster: 該屬性指定一個(gè)URL,在視頻等待播放時(shí)顯示一幅圖像

preload:該屬性可以設(shè)置三個(gè)值
1.none: 不緩存視頻,為了減少不必要的流量
2.metadata:播放前只加載視頻的高度,寬度和其他此類信息
3.auto:默認(rèn)值,要求瀏覽器盡可能快的下載視頻
loop:設(shè)置這個(gè)屬性時(shí),瀏覽器會(huì)反復(fù)播放該視頻

編程實(shí)現(xiàn)視頻播放器

• 事件
  1.在不同的瀏覽器實(shí)現(xiàn)video代碼,播放器控件的圖形設(shè)計(jì)會(huì)有一些差別,每一種瀏覽器都有其特殊的按鈕和進(jìn)度條,設(shè)置還有一些特殊的特性,為了讓各瀏覽器顯示效果保持一致,需要使用HTML5支持新的視頻事件,屬性和方法,來(lái)保持一致

2.HTML5加入了新的事件API.在視頻和音頻處理中,HTML5包含一些通知媒體狀態(tài)的事件,如下載進(jìn)度,視頻是否結(jié)束等

3.下面是一些常用事件:
progress:用于更新媒體的下載進(jìn)度,會(huì)周期性的觸發(fā)
conplaythrough:當(dāng)整個(gè)媒體可以順利播放時(shí),就會(huì)觸發(fā)這個(gè)事件
conplay:不考慮整體狀態(tài),只要下載了一定的可放幀會(huì)觸發(fā)這個(gè)事件
ended:媒體到達(dá)末尾時(shí)觸發(fā)
pause:媒體暫停時(shí)觸發(fā)
play:媒體開(kāi)始播放時(shí)觸發(fā)
error:媒體播放出現(xiàn)錯(cuò)誤時(shí)觸發(fā)

window.onload=function(){
  elem=document.getElementById('media');
  elem.addEventListener('pause',userPause,flase);
  elem.addEventListener('play',userPlay,flase);
}
function userPause(){
  .........
}
function userPlay(){
  ......................
}

• 方法
  下面是HTML5新增加的媒體處理方法
  play() 播放媒體文件
  pause() 暫停播放
  load() 加載媒體文件,動(dòng)態(tài)應(yīng)用程序可使用該方法提前加載
  canPlayType(type)查看瀏覽器是否支持這種文件格式的媒體文件

window.onload=function(){
var  elem=document.getElementById('media');
var btn=document.getElementById('play');
if(elem.paused){
 elem.play();
 btn.value="暫停";
}else{
 elem.pause();
 btn.value="開(kāi)始";
}
}

• 屬性
  html5新增的針對(duì)視頻元素的處理屬性如下:
  paused 媒體處于暫停或未播狀態(tài),這個(gè)值為true
  ended 如果媒體已經(jīng)結(jié)束播放,這個(gè)值為true
  duration 返回媒體時(shí)長(zhǎng),以秒為單位
  currentTime 獲取或設(shè)置媒體播放位置

音頻處理

在HTML5中播放音頻

• audio元素
  audio元素可以實(shí)現(xiàn)在HTML頁(yè)面中嵌入音頻內(nèi)容,該元素的屬性可以設(shè)置是否播放,預(yù)加載及循環(huán)播放等
  audio元素提供了播放,暫停,音量控件來(lái)控制音頻

• audio屬性
  3.使用audio元素至少要提供三種音頻格式的文件:MP3.Ogg,Wav
  3.1MP3:采用mpeg音頻解碼器
  3.2Ogg:采用ogg音頻解碼器
  3.3Wav:采用wav音頻解碼器

瀏覽器 MP3 Wav Ogg
IE9+ yes no no
Chrome6+ yes yes yes
Firefox3.6+ no yes yes
Safari5+ yes yes no
Opera10.6+ no yes yes

語(yǔ)法結(jié)構(gòu):

<audio src="mp3/yellow.mp3" controls>
</audio>
或:
<audio controls>
<source src=
"mp3/yellow.mp3"/>
</audio>

audio元素支持一下屬性:
src:指定播放文件的URL,可通過(guò)<source>
controls:可激活各瀏覽器提供的默認(rèn)頁(yè)面
autoplay: 加載音頻后自動(dòng)播放
preload: 緩存設(shè)置

編程實(shí)現(xiàn)音頻播放器

• 事件,方法
  HTML5媒體API支持視頻和音頻,視頻所支持的每一種事件,方法和屬性,音頻都有對(duì)應(yīng)的支持
  常用事件:
  ended
  pause
  play
  常用方法:
  play()
  pause()

HTML5表單元素

表單簡(jiǎn)介

無(wú)論是實(shí)現(xiàn)功能還是展示頁(yè)面元素,表單的HTML中都有不可代替的作用
在其他版本的HTML中,表單包含的元素非常有限,并且屬性也不多,尤其是在數(shù)據(jù)交互過(guò)程中數(shù)據(jù)的驗(yàn)證需要編寫大量的JavaScript代碼
上述的不足,都已經(jīng)在HTML5中被克服了,HTML5在以上的基礎(chǔ)上增加了許多標(biāo)簽以及屬性,為開(kāi)發(fā)人員帶來(lái)方便

input類型

• 電子郵件類型
  功能描述:輸入E-mail地址的文本框
  語(yǔ)法:<input type="email"/>

• 搜索類型
  輸入搜索關(guān)鍵字操作的文本框
  語(yǔ)法:<input type="search"/>

• URL類型
  輸入Web站點(diǎn)地址的文本框
  語(yǔ)法:<input type="url"/>

• 電話號(hào)碼類型
  主要針對(duì)電話號(hào)碼的輸入,能夠指示瀏覽器根據(jù)不同的設(shè)備進(jìn)行調(diào)整
  語(yǔ)法:<input type="tel"/>

• 數(shù)字類型
  只能接受數(shù)字值
  語(yǔ)法:<input type="number"/>
  屬性:
  min:當(dāng)前域能接受的最小值
  max:當(dāng)前域能接受的最大值
  step:決定了域所接受值的遞增或遞減的步長(zhǎng).默認(rèn)為1

• 范圍類型
  允許用戶選擇一個(gè)范圍的數(shù)值
  語(yǔ)法:<input type="range" min="10" max="1000" value="50"/>
  屬性:
  min 范圍的下限值
  max 范圍的上限值
  step 聲明該值遞增或遞減的步長(zhǎng)
  value 設(shè)置初始值

• 顏色類型
  預(yù)定義顏色拾取控件
  語(yǔ)法:<input type="color"/>

• 日期類型
  創(chuàng)建一個(gè)日期輸入域
  語(yǔ)法:<input type="date"/>

• 周類型
  與data類似,但是只能選擇周
  語(yǔ)法:<input type="week"/>

• 月份類型
  與data類型很相似,但是只能選擇一個(gè)月份
  語(yǔ)法:<input type="month"/>

• 日期與時(shí)間類型
  支持輸入完整的時(shí)間和日期,包括時(shí)區(qū)
  語(yǔ)法:<input type="datatime"/>

• 本地日期與時(shí)間類型
  支持輸入完整的時(shí)間和日期,但不包括時(shí)區(qū)
  語(yǔ)法:<input type="datatime-local"/>

新表單元素

• Datalist元素
  <datalist>元素是一個(gè)表單特有的元素,它可以使用list屬性預(yù)創(chuàng)建一組列表項(xiàng),后面可以為輸入框的輸入提示

<datalist id="mylist">
  <option value="010" label="北京"/>
  <option value="021" label="上海"/>
  <option value="023" label="重慶"/>
  <option value="022" label="天津"/>
</datalist>
<input type="text" name="address" list="mylist">

• Progress元素
  <progress>表示一個(gè)任務(wù)的完成進(jìn)度,而且通常這些任務(wù)都在表單中啟動(dòng)和處理
  屬性:
  Value:任務(wù)執(zhí)行的進(jìn)度
  Max:聲明任務(wù)完成后達(dá)到的值

<progress max="100" value="20"></progress>

• Meter元素
  Meter元素可用于顯示刻度,而非進(jìn)度
  屬性:
  min,max 設(shè)置范圍邊界
  value 確定測(cè)量的值
  low high optimum 將范圍劃分為不同的部分和設(shè)置最佳位置

<meter min="0" max="100 low="20" high="80" optimum="70"value="55"/>

• Output元素
  1.Output元素通常用于顯示表單元素處理的結(jié)果值
  屬性:
  for 將output元素與參與計(jì)算的源元素相關(guān)聯(lián).目的是為了提高代碼的可讀性

<form 
oninput="x.value=parseInt(a.value)+parseInt(b.value)"
>0
  <input type="range" id="a" value="50">100+
  <input type="number" id="b" value="50">=
  <output name="x" for="a b"></output>
</form>

HTML5表單屬性

屬性介紹

有一些輸入類型要求使用特定的屬性才能顯示效果,如前面提到過(guò)的min max step 其他輸入類型需要使用一些屬性來(lái)改進(jìn)其他性能,或者決定驗(yàn)證過(guò)程的重要性

HTML5標(biāo)準(zhǔn)中原來(lái)的基礎(chǔ)上增加了一些新的屬性:Placeholder屬性、Multiple屬性桃煎、Autofocus屬性会油、Form屬性

屬性詳解

• Placeholder屬性
  Placeholder屬性通常用于search輸入類型,也可以用在文本域,它表示一個(gè)簡(jiǎn)單提示,單詞或詞匯,可用于幫助用戶輸入正確的內(nèi)容.該屬性能夠在文本域的內(nèi)部顯示一些內(nèi)容
  語(yǔ)法: <input type="text" placeholder="請(qǐng)輸入用戶名稱">

• Multiple屬性
  Multiple屬性可以用在一些輸入類型中(email file等)
  從而支持在一個(gè)域中輸入多個(gè)值,但說(shuō)插入的值必須用逗號(hào)分隔
  語(yǔ)法:<input type="email" multiple>

• Autofocus屬性
  Autofocus屬性會(huì)在網(wǎng)頁(yè)加載時(shí)自動(dòng)讓域獲得焦點(diǎn),相但與JavaScript中的focus()方法,適用于所有input元素
  語(yǔ)法:<input type="text" autofocus/>

• Form屬性
  Form屬性是一個(gè)實(shí)用的附加功能,它可用于form標(biāo)簽之外聲明元素
  語(yǔ)法:

<form id="myform">
</form>
<input type="text" form="myform" name="uname"/>