溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“HTML5中多媒體標(biāo)簽的簡介”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5中多媒體標(biāo)簽的簡介”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴展帶來保證。 3、平臺無關(guān)性：超級文本標(biāo)記語言能夠在廣泛的平臺上使用，這也是萬維網(wǎng)盛行的一個原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語言，它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
早期的因特網(wǎng)主要用來分享學(xué)術(shù)成果,但是對普通民眾而言,更愿意在上面分享一些更有趣的內(nèi)容,比如
視頻,音頻,這些技術(shù)在html5之前都不是由html標(biāo)簽提供的
雖然早期的
html并沒有提供支持視頻或者音頻播放的標(biāo)簽,但是這并不影響人們分享的欲望
支持方式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ù)
如果想要查看視頻的播放方式,將鼠標(biāo)移動到視頻窗口,右鍵如果可以看到Flash等文字,那么該網(wǎng)站使用的就是Flash插件
多媒體標(biāo)簽:
Html5為了解決使用Flash的各種問題推出了多媒體標(biāo)簽
由于視頻格式問題,不同的瀏覽器對于相同格式的視頻支持不同,需要準(zhǔn)備多份視頻
無法對播放的視頻提供很好的保護效果,因為用戶可以直接對視頻文件另存為
總結(jié):
雖然html5中的多媒體標(biāo)簽有各種不好,但我們還是需要擁抱這項新的技術(shù),因為他的用法,真的十分簡單
在w3c中對于
audio的說明是這樣的audio標(biāo)簽
示例代碼1:
下面演示一種最簡單的使用方式
src:音頻的地址
controls:音頻播放控制器
autoplay:自動播放
loop:循環(huán)
poster:指定視頻不播放時顯示的封面
<audio src="song.ogg" controls="controls" autoplay loop> </audio>
示例代碼2:
src:音頻的地址
由于音頻格式在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼
source:指定多個音頻,如果找到了當(dāng)前瀏覽器支持的,那么會直接使用,如果所有的source標(biāo)簽格式都不支持,會顯示最后的文本內(nèi)容
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> 你的瀏覽器不支持此種格式 </audio>
Video標(biāo)簽用來播放視頻,用法跟audio標(biāo)簽十分類似
示例代碼1:
src:視頻地址
controls:控制器
autoplay:自動播放
loop:循環(huán)
width:寬度
height:高度
<video src="movie.ogg" controls autoplay loop width = "200px" height = "200px"> </video>
示例代碼2:
src:視頻的地址
由于視頻在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼
source:指定多個視頻,如果找到了當(dāng)前瀏覽器支持的,那么會直接使用,如果所有的source標(biāo)簽格式都不支持,會顯示最后的文本內(nèi)容
<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>
在html5之前如果我們想要使用進度條,可以通過一些前端框架,或者自己使用控件搭建出類似的外觀,但是在html5中推出了兩個進度條控件,接下來就讓我們來看看如何使用它們
外觀
如果只是定義該元素<progress><progress/>不設(shè)置任何內(nèi)容,顯示效果如下圖
progress.gif
作用:
用來顯示任務(wù)的進度(進程)
如果想要用來顯示度量值(比如容量使用情況)請使用meter標(biāo)簽
屬性:
max: 總工作量
value: 已完成工作量
兼容性:
為了保證顯示效果,可以再progress標(biāo)簽中寫入內(nèi)容,在當(dāng)前瀏覽器無法顯示該控件時,會轉(zhuǎn)而顯示內(nèi)容
外觀:
通過屬性值的搭配能夠顯示出多重不同的變化
常見屬性:
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
以上是“HTML5中多媒體標(biāo)簽的簡介”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
