HTML5多媒體audio和video(一)
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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

audio對音訊的支援

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

音訊格式IE9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg VorbisNOYESYESYESNO
MP3YESNONOYESYES
WavNOYESYESNOYES

video對視訊的支援

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

格式IEFirefoxOperaChromeSafari
OggNo3.510.55.0No
MPEG 49.0NoNo5.03.0
WebMNo4.010.66.0No

audio和video播放音視訊例項

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

上面是最簡單的播放音訊和視訊的示例程式碼,當然mp3和mp4資原始檔要自己找啦~
下面是我的示例程式碼執行效果,音訊和視訊都播放起來了!
這裡寫圖片描述

相關文章

程式語言 最新文章