HTML5多媒體audio和video詳細介紹（一）

來源：懂視網責編：小采時間：2020-11-27 15:11:31

HTML5多媒體audio和video詳細介紹（一）

HTML5多媒體audio和video詳細介紹（一）:通常瀏覽器通過安裝flash來實現網頁音視頻的播放。 HTML5新增了audio和video元素來進行音視頻的播放，從而減少了對flash的依賴。audio對音頻的支持HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。目前audio元素支持以下三種音頻格式：音頻格式

推薦度：

點擊下載本文 文檔為doc格式

導讀HTML5多媒體audio和video詳細介紹（一）:通常瀏覽器通過安裝flash來實現網頁音視頻的播放。 HTML5新增了audio和video元素來進行音視頻的播放，從而減少了對flash的依賴。audio對音頻的支持HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。目前audio元素支持以下三種音頻格式：音頻格式

通常瀏覽器通過安裝flash來實現網頁音視頻的播放。
HTML5新增了audio和video元素來進行音視頻的播放，從而減少了對flash的依賴。

audio對音頻的支持

HTML5 規定了一種通過 audio 元素來包含音頻的標準方法。
目前audio元素支持以下三種音頻格式：

音頻格式	IE9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	NO	YES	YES	YES	NO
MP3	YES	NO	NO	YES	YES
Wav	NO	YES	YES	NO	YES

video對視頻的支持

HTML5 規定了一種通過 video 元素來包含視頻的標準方法。
目前video元素支持以下三種視頻格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

audio和video播放音視頻實例

<!Doctype html>
<html>
<head>
<title>HTML5多媒體</title>
<meta charset="utf-8"/>
</head>
<body>
 <p>
 <audio id="myAudio" controls="controls">
 <source src="resource/傳奇.mp3" type="audio/mpeg">
 您的瀏覽器不支持audio 
 </audio>
 </p>

 <p>
 <video id="myVideo" controls="controls">
 <source src="resource/手語.mp4" type="video/mp4">
 您的瀏覽器不支持video 
 </video>
 </p>
 </body>
 </html>

上面是最簡單的播放音頻和視頻的示例代碼，當然mp3和mp4資源文件要自己找啦~
下面是我的示例代碼運行效果，音頻和視頻都播放起來了！
這里寫圖片描述