早期的因特網(wǎng)主要用來(lái)分享學(xué)術(shù)成果,但是對(duì)普通民眾而言,更愿意在上面分享一些更有趣的內(nèi)容,比如
視頻,音頻,這些技術(shù)在html5之前都不是由html標(biāo)簽提供的
網(wǎng)頁(yè)音視頻解決方案發(fā)展
雖然早期的
html并沒有提供支持視頻或者音頻播放的標(biāo)簽,但是這并不影響人們分享的欲望
-
支持方式1:
- 使用
embed直接將視頻塞入頁(yè)面,然后就可以使用Windows Media Player,Apple QuickTime或者其實(shí)的視頻播放器來(lái)創(chuàng)建播放窗口 - 但是這種方式對(duì)于視頻本身不可控,兼容性問(wèn)題也無(wú)法顧及
- 使用
-
支持方式2
- 使用瀏覽器插件,一個(gè)是微軟的
Silverlight,還有使用最普遍的Adobe Flash -
Flash不但完全解決了瀏覽器支持問(wèn)題,而且裝機(jī)率之高讓人咋舌(基本上99%的計(jì)算機(jī)都安裝了Flash播放器) - 使用
Flash播放視頻除了要學(xué)習(xí)Flash這項(xiàng)技術(shù)本身以外,更關(guān)鍵的是在iPhone,ipad并不支持這項(xiàng)技術(shù) - 如果想要查看視頻的播放方式,將鼠標(biāo)移動(dòng)到視頻窗口,右鍵如果可以看到
Flash等文字,那么該網(wǎng)站使用的就是Flash插件
- 使用瀏覽器插件,一個(gè)是微軟的
-
多媒體標(biāo)簽:
-
Html5為了解決使用Flash的各種問(wèn)題推出了多媒體標(biāo)簽 - 由于視頻格式問(wèn)題,不同的瀏覽器對(duì)于相同格式的視頻支持不同,需要準(zhǔn)備多份視頻
- 無(wú)法對(duì)播放的視頻提供很好的保護(hù)效果,因?yàn)橛脩艨梢灾苯訉?duì)視頻文件另存為
-
-
總結(jié):
- 雖然
html5中的多媒體標(biāo)簽有各種不好,但我們還是需要擁抱這項(xiàng)新的技術(shù),因?yàn)樗挠梅?真的十分簡(jiǎn)單
- 雖然
audio標(biāo)簽
在w3c中對(duì)于
audio的說(shuō)明是這樣的audio標(biāo)簽
-
示例代碼1:
- 下面演示一種最簡(jiǎn)單的使用方式
- src:音頻的地址
- controls:音頻播放控制器
- autoplay:自動(dòng)播放
- loop:循環(huán)
- poster:指定視頻不播放時(shí)顯示的封面
<audio src="song.ogg" controls="controls" autoplay loop>
</audio>
-
示例代碼2:
- 由于音頻格式在不同瀏覽器中支持情況不同,考慮兼容性問(wèn)題,我們需要使用下述代碼
- source:指定多個(gè)音頻,如果找到了當(dāng)前瀏覽器支持的,那么會(huì)直接使用,如果所有的
source標(biāo)簽格式都不支持,會(huì)顯示最后的文本內(nèi)容- src:音頻的地址
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
你的瀏覽器不支持此種格式
</audio>
Video標(biāo)簽
Video標(biāo)簽用來(lái)播放視頻,用法跟audio標(biāo)簽十分類似
-
示例代碼1:
- src:視頻地址
- controls:控制器
- autoplay:自動(dòng)播放
- loop:循環(huán)
- width:寬度
- height:高度
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px">
</video>
-
示例代碼2:
- 由于視頻在不同瀏覽器中支持情況不同,考慮兼容性問(wèn)題,我們需要使用下述代碼
-
source:指定多個(gè)視頻,如果找到了當(dāng)前瀏覽器支持的,那么會(huì)直接使用,如果所有的
source標(biāo)簽格式都不支持,會(huì)顯示最后的文本內(nèi)容- src:視頻的地址
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
你的瀏覽器不支持video標(biāo)簽
</video>
兩種進(jìn)度條
在html5之前如果我們想要使用進(jìn)度條,可以通過(guò)一些前端框架,或者自己使用控件搭建出類似的外觀,但是在html5中推出了兩個(gè)進(jìn)度條控件,接下來(lái)就讓我們來(lái)看看如何使用它們
process
-
外觀
- 如果只是定義該元素
<progress><progress/>不設(shè)置任何內(nèi)容,顯示效果如下圖
- 如果只是定義該元素
progress.gif
-
作用:
- 用來(lái)顯示任務(wù)的進(jìn)度(進(jìn)程)
- 如果想要用來(lái)顯示
度量值(比如容量使用情況)請(qǐng)使用meter標(biāo)簽
-
屬性:
- max: 總工作量
- value: 已完成工作量
-
兼容性:
- 為了保證顯示效果,可以再
progress標(biāo)簽中寫入內(nèi)容,在當(dāng)前瀏覽器無(wú)法顯示該控件時(shí),會(huì)轉(zhuǎn)而顯示內(nèi)容
- 為了保證顯示效果,可以再
meter
-
外觀:
- 通過(guò)屬性值的搭配能夠顯示出多重不同的變化
-
常見屬性:
- high:規(guī)定較高的值
- low:規(guī)定較低的值
- max:規(guī)定最大值(可以超過(guò),但是進(jìn)度條已經(jīng)滿了)
- min:規(guī)定最小值
- value:規(guī)定度量的值
示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<meter class="class1" high="80" low="30" max="100" min="10" value="21" ></meter>
<br/>
<meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter>
<br/>
<meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter>
<br/>
<meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter>
<br/>
</body>
</html>
- 顯示效果即截圖
meter.png
總結(jié)
兩種進(jìn)度條都能夠用來(lái)顯示進(jìn)度,由于兼容性以及語(yǔ)義性的問(wèn)題,在實(shí)際開發(fā)中需要
結(jié)合實(shí)際情況決定是否使用它們(或者是使用對(duì)應(yīng)的前端框架)辙培。
