首頁  >  文章  >  web前端  >  HTML5多媒體audio與video詳細介紹(一)

HTML5多媒體audio與video詳細介紹(一)

黄舟
黄舟原創
2017-05-19 16:57:312589瀏覽

通常瀏覽器透過安裝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>

上面是最簡單的播放音訊和視訊的範例程式碼,當然mp3和mp4資源檔案要自己找啦~

下面是我的範例程式碼運行效果,音訊和視訊都播放起來了!



HTML5多媒體audio與video詳細介紹(一)【相關推薦】

1. 

詳解html5的video標籤測試應用

2.

 html 5中使用video元素製作一個影片播放器

3. 

分享一個video標籤無法播放mp4的問題以及解決方案

4. 

#H5 video標籤只能放聲音不能放視訊的解決方法

5.

 IIS的MIME未註冊MP4類型,導致無法辨識vidoe標籤的解決方案

##

以上是HTML5多媒體audio與video詳細介紹(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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