HTML5多媒體audio與video詳細介紹（一）-H5教程-PHP中文網

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

黄舟

發布： 2017-05-19 16:57:31

原創

2592 人瀏覽過

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

audio對音訊的支援

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

##YES NONOYESYES#Wav#video對影片的支援

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

HTML5 規定了一種透過video 元素來包含影片的標準方法。

目前video元素支援以下三種影片格式：

格式#Ogg#MPEG 4#WebM#audio與video播放影音實例

IE	Firefox	Opera	Chrome	Safari
No	3.5+	10.5+	5.0+	No
9.0+	#No	No	5.0+	3.0+
No	4.0 +	10.6+	6.0+	No

<!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>

登入後複製