HTML5多媒體audio和video的示例用法

發(fā)布時(shí)間：2021-02-07 09:58:00 來(lái)源：億速云閱讀：169 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML5多媒體audio和video的示例用法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

通常瀏覽器通過(guò)安裝flash來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)音視頻的播放。
HTML5新增了audio和video元素來(lái)進(jìn)行音視頻的播放，從而減少了對(duì)flash的依賴。

audio對(duì)音頻的支持

HTML5 規(guī)定了一種通過(guò) audio 元素來(lái)包含音頻的標(biāo)準(zhǔn)方法。
目前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對(duì)視頻的支持

HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。
目前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播放音視頻實(shí)例

<!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/手語(yǔ).mp4" type="video/mp4">
            您的瀏覽器不支持video        
            </video>
    </p>
    </body>
    </html>

上面是最簡(jiǎn)單的播放音頻和視頻的示例代碼，當(dāng)然mp3和mp4資源文件要自己找啦~
下面是我的示例代碼運(yùn)行效果，音頻和視頻都播放起來(lái)了！
HTML5多媒體audio和video的示例用法

關(guān)于“HTML5多媒體audio和video的示例用法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

HTML5多媒體audio和video的示例用法

audio對(duì)音頻的支持

video對(duì)視頻的支持

audio和video播放音視頻實(shí)例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽