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

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

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

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

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

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

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

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