HTML5--多媒體標籤詳解
##網頁影音解決方案發展早期的因特網主要用來分享學術成就,但是對普通民眾而言,更願意在上面分享一些更有趣的內容,比如
視頻
,音頻
,這些技術在<a href="http://www.php.cn/wiki/1118.html" target="_blank">html5</a>
之前都不是由<a href="http://www.php.cn/code/5011.html" target="_blank">html標籤</a>
提供的
雖然早期的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:
- 由於音訊格式在不同瀏覽器中支援情況不同,考慮相容性問題,我們需要使用下述程式碼
- source:指定多個音訊,如果找到了目前瀏覽器支援的,那麼會直接使用,如果所有的
- source
標籤格式都不支援,會顯示最後的文本內容
- src:音訊的位址
<audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> 你的浏览器不支持此种格式 </audio>
#Video標籤用來播放影片,用法跟
#audio
標籤十分類似
- 範例程式碼1:
- 範例程式碼2:
- 影片的位址
#由於影片在不同瀏覽器中支援情況不同,考慮相容性問題,我們需要使用下述程式碼
source:指定多个视频,如果找到了当前浏览器支持的,那么会直接使用,如果所有的
source
标签格式都不支持,会显示最后的文本内容
- #src:
<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中推出了两个进度条控件,接下来就让我们来看看如何使用它们
process
外观
如果只是定义该元素
<progress><progress/>
不设置任何内容,显示效果如下图
progress.gif
作用:
用来显示任务的进度(进程)
如果想要用来显示
度量值
(比如容量使用情况)请使用meter
标签属性:
max: 总工作量
value: 已完成工作量
兼容性:
为了保证显示效果,可以再
progress
标签中写入内容,在当前浏览器无法显示该控件时,会转而显示内容
meter
外观:
通过属性值的搭配能够显示出多重不同的变化
常见属性:
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
总结
两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要
结合实际情况
决定是否使用它们(或者是使用对应的前端框架)。
【相关推荐】
1. 免费h5在线视频教程
2. HTML5 完整版手册
以上是HTML5--多媒體標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)