溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML5中多媒體標簽的簡介”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“HTML5中多媒體標簽的簡介”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。
1、簡易性：超級文本標記語言版本升級采用超集方式，從而更加靈活方便，適合初學前端開發者使用。 2、可擴展性：超級文本標記語言的廣泛應用帶來了加強功能，增加標識符等要求，超級文本標記語言采取子類元素的方式，為系統擴展帶來保證。 3、平臺無關性：超級文本標記語言能夠在廣泛的平臺上使用，這也是萬維網盛行的一個原因。 4、通用性：HTML是網絡的通用語言，它允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。
早期的因特網主要用來分享學術成果,但是對普通民眾而言,更愿意在上面分享一些更有趣的內容,比如
視頻,音頻,這些技術在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 class="class1" high="80" low="30" max="100" min="10" value="21" ></meter> <br/> <meter class="class2" high="80" low="30" max="100" min="10" value="60"></meter> <br/> <meter class="class3" high="80" low="30" max="100" min="10" value="90" ></meter> <br/> <meter class="class4" high="80" low="30" max="100" min="10" value="100" optimum="10" ></meter> <br/> </body> </html>
顯示效果即截圖
meter.png
以上是“HTML5中多媒體標簽的簡介”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
