99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

10年積累的做網(wǎng)站、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有城步免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

html有什么特點(diǎn)

1、簡(jiǎn)易性：超級(jí)文本標(biāo)記語(yǔ)言版本升級(jí)采用超集方式，從而更加靈活方便，適合初學(xué)前端開(kāi)發(fā)者使用。 2、可擴(kuò)展性：超級(jí)文本標(biāo)記語(yǔ)言的廣泛應(yīng)用帶來(lái)了加強(qiáng)功能，增加標(biāo)識(shí)符等要求，超級(jí)文本標(biāo)記語(yǔ)言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來(lái)保證。  3、平臺(tái)無(wú)關(guān)性：超級(jí)文本標(biāo)記語(yǔ)言能夠在廣泛的平臺(tái)上使用，這也是萬(wàn)維網(wǎng)盛行的一個(gè)原因。 4、通用性：HTML是網(wǎng)絡(luò)的通用語(yǔ)言，它允許網(wǎng)頁(yè)制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面，這些頁(yè)面可以被網(wǎng)上任何其他人瀏覽到，無(wú)論使用的是什么類型的電腦或?yàn)g覽器。

早期的因特網(wǎng)主要用來(lái)分享學(xué)術(shù)成果,但是對(duì)普通民眾而言,更愿意在上面分享一些更有趣的內(nèi)容,比如視頻,音頻,這些技術(shù)在html5之前都不是由html標(biāo)簽提供的

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

雖然早期的html并沒(méi)有提供支持視頻或者音頻播放的標(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插件

• 多媒體標(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í)顯示的封面

• 示例代碼2:

• src:音頻的地址

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

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

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

Video標(biāo)簽

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

• 示例代碼1:

• src:視頻地址

• controls:控制器

• autoplay:自動(dòng)播放

• loop:循環(huán)

• width:寬度

• height:高度

• 示例代碼2:

• src:視頻的地址

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

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

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

兩種進(jìn)度條

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

process

• 外觀

• 如果只是定義該元素不設(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ò)屬性值的搭配能夠顯示出多重不同的變化

• 常見(jiàn)屬性:

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

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

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

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

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

• 示例代碼:

• 顯示效果即截圖

meter.png

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

文章題目：HTML5中多媒體標(biāo)簽的簡(jiǎn)介
文章位置：http://www.ef60e0e.cn/article/jjpdgj.html