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