第9節(jié)音頻及視頻標(biāo)簽

1、第9節(jié) 音頻及視頻標(biāo)簽,武漢紡織大學(xué)傳媒學(xué)院cm.wtu.edu.cn,2024/3/16,1,傳媒學(xué)院,1、引言,HTML5是HTML最新的修訂版本，2014年10月由萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成標(biāo)準(zhǔn)制定HTML5的設(shè)計(jì)目標(biāo)為了在移動(dòng)設(shè)備上支持多媒體特點(diǎn) 簡(jiǎn)單易學(xué)比如視頻標(biāo)簽，如果使用html4要寫更多代碼,2024/3/16,2,傳媒學(xué)院,支持HTML5的瀏覽器IE10+支持Firefox4.0+支持Chrome6+

2、支持Win10的Edge移動(dòng)平臺(tái)的瀏覽器大都支持，比如安卓、蘋果自帶的瀏覽器,,2024/3/16,3,傳媒學(xué)院,HTML5的音頻標(biāo)簽語(yǔ)法實(shí)例您的瀏覽器不支持 audio 標(biāo)簽 src屬性指出要播放的音頻文件，不可缺少被audio標(biāo)簽對(duì)包含的文字內(nèi)容只會(huì)在不支持html5的瀏覽器上顯示出來(lái),2、audio標(biāo)簽,2024/3/16,4,傳媒學(xué)院,audio標(biāo)簽屬性autoplay取值為autoplay，如果出現(xiàn)該屬

3、性，則音樂(lè)就緒后會(huì)馬上播放controls取值為controls，如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕loop取值loop，如果出現(xiàn)該屬性，則重復(fù)播放音頻preload取值preload，如果出現(xiàn)該屬性，則網(wǎng)頁(yè)加載時(shí)加載該音頻，如果同時(shí)出現(xiàn)autoplay則忽略此屬性,,2024/3/16,5,傳媒學(xué)院,例子會(huì)有什么效果？例子這個(gè)呢？例子,2024/3/16,6,傳媒學(xué)院,Firefox上的顯示效果,

4、HTML5的視頻標(biāo)簽video元素支持三種視頻格式OggMpeg4后綴為mp4WebM支持mp4的瀏覽器新版本的ie、edge、firefox、chrome而且要win7及以上系統(tǒng)才支持,3、video標(biāo)簽,2024/3/16,7,傳媒學(xué)院,語(yǔ)法實(shí)例您的瀏覽器不支持video標(biāo)簽 src屬性指出要播放的視頻頻文件，不可缺少被video標(biāo)簽對(duì)包含的文字內(nèi)容只會(huì)在不支持html5的瀏覽器上顯示出來(lái)屬性widt

5、h，height設(shè)置視頻播放窗口的大小如果不設(shè)置該屬性，則按視頻默認(rèn)大小顯示屬性controls（取值controls）顯示控件比如播放按鈕,2024/3/16,8,傳媒學(xué)院,video標(biāo)簽的其他屬性autoplay取值為autoplay，如果出現(xiàn)該屬性，則視頻就緒后會(huì)馬上播放loop取值loop，如果出現(xiàn)該屬性，則重復(fù)播放視頻preload取值preload，如果出現(xiàn)該屬性，則網(wǎng)頁(yè)加載時(shí)加載該視頻，如果同時(shí)出現(xiàn)aut

6、oplay則忽略此屬性,2024/3/16,9,傳媒學(xué)院,例子設(shè)置寬，高自動(dòng)變化點(diǎn)擊播放，開始加載視頻，就緒則開始播放如果希望是自動(dòng)循環(huán)播放的廣告呢？,2024/3/16,10,傳媒學(xué)院,Firefox上的顯示效果,可用于查看網(wǎng)頁(yè)代碼，發(fā)現(xiàn)錯(cuò)誤打開/關(guān)閉方式工具-Web開發(fā)者-查看器,4、Firefox查看器,2024/3/16,11,傳媒學(xué)院,例子,2024/3/16,12,傳媒學(xué)院,例子,2024/3/16,13,傳媒

7、學(xué)院,例子,2024/3/16,14,傳媒學(xué)院,實(shí)際代碼,作業(yè)1,制作一個(gè)音頻/視頻播放頁(yè)面，兩者都有控制界面，頁(yè)面打開時(shí)音頻不自動(dòng)播放，視頻自動(dòng)循環(huán)播放，音頻/視頻文件放置在和網(wǎng)頁(yè)同一目錄下，效果圖如下,2024/3/16,15,傳媒學(xué)院,利用Firefox的查看器發(fā)現(xiàn)下列代碼的錯(cuò)誤，并改正 WTU Welcome to my site