早期的因特網主要用來分享學術成果,但是對普通民眾而言,更愿意在上面分享一些更有趣的內容,比如視頻,音頻,這些技術在html5之前都不是由html標簽提供的

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

支持方式1:

使用embed直接將視頻塞入頁面,然后就可以使用Windows Media Player,Apple QuickTime或者其實的視頻播放器來創建播放窗口

但是這種方式對于視頻本身不可控,兼容性問題也無法顧及

支持方式2

使用瀏覽器插件,一個是微軟的Silverlight,還有使用最普遍的Adobe Flash

Flash不但完全解決了瀏覽器支持問題,而且裝機率之高讓人咋舌(基本上99%的計算機都安裝了Flash播放器)

使用Flash播放視頻除了要學習Flash這項技術本身以外,更關鍵的是在iPhone,ipad并不支持這項技術

如果想要查看視頻的播放方式,將鼠標移動到視頻窗口,右鍵如果可以看到Flash等文字,那么該網站使用的就是Flash插件

多媒體標簽:

Html5為了解決使用Flash的各種問題推出了多媒體標簽

由于視頻格式問題,不同的瀏覽器對于相同格式的視頻支持不同,需要準備多份視頻

無法對播放的視頻提供很好的保護效果,因為用戶可以直接對視頻文件另存為

總結:

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

在w3c中對于audio的說明是這樣的audio標簽

示例代碼1:

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

src:音頻的地址

controls:音頻播放控制器

autoplay:自動播放

loop:循環

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

 audio src= song.ogg controls= controls autoplay loop  /audio 

示例代碼2:

src:音頻的地址

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

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

 audio controls= controls  source src= song.ogg type= audio/ogg  source src= song.mp3 type= audio/mpeg 你的瀏覽器不支持此種格式 /audio 

Video標簽用來播放視頻,用法跟audio標簽十分類似

示例代碼1:

src:視頻地址

controls:控制器

autoplay:自動播放

loop:循環

width:寬度

height:高度

 video src= movie.ogg controls autoplay loop width = 200px height = 200px  /video 

示例代碼2:

src:視頻的地址

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

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

 video width= 320 height= 240 controls= controls  source src= movie.ogg type= video/ogg  source src= movie.mp4 type= video/mp4 你的瀏覽器不支持video標簽 /video 

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

外觀

如果只是定義該元素 progress progress/ 不設置任何內容,顯示效果如下圖

progress.gif

作用:

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

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

屬性:

max: 總工作量

value: 已完成工作量

兼容性:

為了保證顯示效果,可以再progress標簽中寫入內容,在當前瀏覽器無法顯示該控件時,會轉而顯示內容

外觀:

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

常見屬性:

high:規定較高的值

low:規定較低的值

max:規定最大值(可以超過,但是進度條已經滿了)

min:規定最小值

value:規定度量的值

示例代碼:

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Title /title  /head  body  meter >
顯示效果即截圖

meter.png
總結
兩種進度條都能夠用來顯示進度,由于兼容性以及語義性的問題,在實際開發中需要結合實際情況決定是否使用它們(或者是使用對應的前端框架)。
【相關推薦】
1. 免費h5在線視頻教程
2. HTML5 完整版手冊
3. VeVb.com原創html5視頻教程
以上就是HTML5--多媒體標簽詳解的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。