HTML5中多媒體標(biāo)簽的簡介-創(chuàng)新互聯(lián)

這篇“HTML5中多媒體標(biāo)簽的簡介”文章，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5中多媒體標(biāo)簽的簡介”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進(jìn)入主題吧。

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比廬江網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式廬江網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋廬江地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。

html有什么特點

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便，適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。 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)簽提供的

網(wǎng)頁音視頻解決方案發(fā)展

雖然早期的html并沒有提供支持視頻或者音頻播放的標(biāo)簽,但是這并不影響人們分享的欲望

支持方式1:

使用embed直接將視頻塞入頁面,然后就可以使用Windows Media Player,Apple QuickTime或者其實的視頻播放器來創(chuàng)建播放窗口
但是這種方式對于視頻本身不可控,兼容性問題也無法顧及

支持方式2

使用瀏覽器插件,一個是微軟的Silverlight,還有使用最普遍的Adobe Flash
Flash不但完全解決了瀏覽器支持問題,而且裝機(jī)率之高讓人咋舌(基本上99%的計算機(jī)都安裝了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)備多份視頻
無法對播放的視頻提供很好的保護(hù)效果,因為用戶可以直接對視頻文件另存為

總結(jié):

雖然html5中的多媒體標(biāo)簽有各種不好,但我們還是需要擁抱這項新的技術(shù),因為他的用法,真的十分簡單

audio標(biāo)簽

在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)簽

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>

兩種進(jìn)度條

在html5之前如果我們想要使用進(jìn)度條,可以通過一些前端框架,或者自己使用控件搭建出類似的外觀,但是在html5中推出了兩個進(jìn)度條控件,接下來就讓我們來看看如何使用它們

process

外觀

如果只是定義該元素<progress><progress/>不設(shè)置任何內(nèi)容,顯示效果如下圖

HTML5中多媒體標(biāo)簽的簡介

progress.gif

作用:

用來顯示任務(wù)的進(jìn)度(進(jìn)程)
如果想要用來顯示度量值(比如容量使用情況)請使用meter標(biāo)簽

屬性:

max: 總工作量
value: 已完成工作量

兼容性:

為了保證顯示效果,可以再progress標(biāo)簽中寫入內(nèi)容,在當(dāng)前瀏覽器無法顯示該控件時,會轉(zhuǎn)而顯示內(nèi)容

meter

外觀:

通過屬性值的搭配能夠顯示出多重不同的變化

常見屬性:

high:規(guī)定較高的值
low:規(guī)定較低的值
max:規(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>

顯示效果即截圖

HTML5中多媒體標(biāo)簽的簡介

meter.png

以上是“HTML5中多媒體標(biāo)簽的簡介”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：HTML5中多媒體標(biāo)簽的簡介-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article28/coeocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)站營銷、微信公眾號、面包屑導(dǎo)航、全網(wǎng)營銷推廣、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容