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

成都創(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、可擴展性：超級文本標(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)簽提供的

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

雖然早期的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ù),因為他的用法,真的十分簡單

audio標(biāo)簽

在w3c中對于audio的說明是這樣的audio標(biāo)簽

• 示例代碼1:

• 下面演示一種最簡單的使用方式

• src:音頻的地址

• controls:音頻播放控制器

• autoplay:自動播放

• loop:循環(huán)

• poster:指定視頻不播放時顯示的封面

• 示例代碼2:

• src:音頻的地址

• 由于音頻格式在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼

• source:指定多個音頻,如果找到了當(dāng)前瀏覽器支持的,那么會直接使用,如果所有的source標(biāo)簽格式都不支持,會顯示最后的文本內(nèi)容

  
  
你的瀏覽器不支持此種格式

Video標(biāo)簽

Video標(biāo)簽用來播放視頻,用法跟audio標(biāo)簽十分類似

• 示例代碼1:

• src:視頻地址

• controls:控制器

• autoplay:自動播放

• loop:循環(huán)

• width:寬度

• height:高度

• 示例代碼2:

• src:視頻的地址

• 由于視頻在不同瀏覽器中支持情況不同,考慮兼容性問題,我們需要使用下述代碼

• source:指定多個視頻,如果找到了當(dāng)前瀏覽器支持的,那么會直接使用,如果所有的source標(biāo)簽格式都不支持,會顯示最后的文本內(nèi)容

你的瀏覽器不支持video標(biāo)簽

兩種進度條

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

process

• 外觀

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

progress.gif

• 作用:

• 用來顯示任務(wù)的進度(進程)

• 如果想要用來顯示度量值(比如容量使用情況)請使用meter標(biāo)簽

• 屬性:

• max: 總工作量

• value: 已完成工作量

• 兼容性:

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

meter

• 外觀:

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

• 常見屬性:

• high:規(guī)定較高的值

• low:規(guī)定較低的值

• max:規(guī)定大值(可以超過,但是進度條已經(jīng)滿了)

• min:規(guī)定最小值

• value:規(guī)定度量的值

• 示例代碼:

• 顯示效果即截圖

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ù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

本文名稱：HTML5中多媒體標(biāo)簽的簡介-創(chuàng)新互聯(lián)
鏈接地址：http://weahome.cn/article/coeocp.html