HTML5--多媒體標籤詳解-H5教程-PHP中文網

首頁

web前端

H5教程

HTML5--多媒體標籤詳解

零下一度

May 08, 2017 pm 01:46 PM

早期的因特網主要用來分享學術成就,但是對普通民眾而言,更願意在上面分享一些更有趣的內容,比如視頻,音頻 ,這些技術在<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中的多媒體標籤有各種不好,但我們還是需要擁抱這項新的技術,因為他的用法,真的十分簡單

audio標籤

在
w3c中對於audio的說明是這樣的audio標籤

範例程式碼1:

下面示範一種最簡單的使用方式
src:音訊的位址
#controls:音訊播放
控制器
autoplay:自動播放
loop:
循環

<audio src="song.ogg" controls="controls" autoplay loop>
</audio>

#範例程式碼2:

source
標籤格式都不支援,會顯示最後的文本內容

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
你的浏览器不支持此种格式
</audio>

#Video
標籤用來播放影片,用法跟#audio標籤十分類似

範例程式碼1:

width
:寬度

#height

:高度

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

影片的位址
#由於影片在不同瀏覽器中支援情況不同,考慮相容性問題,我們需要使用下述程式碼
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中推出了两个进度条控件,接下来就让我们来看看如何使用它们

process

外观

如果只是定义该元素<progress><progress></progress></progress>不设置任何内容,显示效果如下图

HTML5--多媒體標籤詳解

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>

显示效果即截图

HTML5--多媒體標籤詳解

meter.png

总结

两种进度条都能够用来显示进度,由于兼容性以及语义性的问题,在实际开发中需要结合实际情况决定是否使用它们(或者是使用对应的前端框架)。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

以上是HTML5--多媒體標籤詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5：工具，框架和最佳實踐Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面，支持組件化開發。 2.React通過虛擬DOM優化頁面渲染，適合複雜應用。 3.Webpack用於模塊打包，優化資源加載。

HTML5的遺產：當前了解H5Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

See all articles