#HTML(HTML5):多媒體嵌入

今天終於要來提HTML5的新功能之一-放置多媒體的部分,底下一樣就用範例來解說。

embed:外部嵌入播放器播放音樂與影片

media.html
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html><html><head><metacharset="utf-8" /><title>多媒體</title></head><body><embedsrc="Sonic Generations [OST] - Rooftop Run (Modern).mp3" /><embedsrc="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4" /></body></html>

media01.pngmedia01.png

這個embed標籤從很早以前就有了,不過直至HTML5才將之納為標準。

embed主要是用外部的播放程式鑲嵌在網頁上來播放音樂或影片,利用src屬性去放置音樂或影片的連結。如果該瀏覽器找不到可播放此音樂或影片的播放程式,那麼就沒辦法播放了。

不過在HTML5的標準裡,已經支援讓瀏覽器去播放音樂或影片了!底下就來看看直接讓瀏覽器播放音樂或影片的標籤吧!

audio:播放音樂

media02.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="utf-8" /><title>多媒體</title></head><body><p><audiosrc="Sonic Generations [OST] - Rooftop Run (Modern).mp3"controlsautoplayloop>
			對不起,您的瀏覽器不支援HTML5。
			</audio></p></body></html>

media02.pngmedia02.png

audio標籤用於放置音樂,屬性有很多,在此列舉常用的controls、autoplay、loop,這些屬性跟以前看到的屬性有點不同,以前的屬性都要代值,但是HTML5中很多標籤是具有布林屬性:有出現就有功能,沒出現就沒功能。controls表示是否要出現控制面板,autoplay表示是否要自動播放,loop表示是否要循環。

audio裡面的內容可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

video:播放影片

media03.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html><head><metacharset="utf-8" /><title>多媒體</title></head><body><p><videosrc="[灆洢]Sonic Generations - Sky Sanctuary Act2 - 0225.13-087-Rank S.mp4"controlsautoplayloop>
			對不起,您的瀏覽器不支援HTML5。
			</video></p></body></html>

media03.pngmedia03.png

video標籤用於放置音樂,屬性跟audio一樣有很多,範例中一樣列舉常用的controls、autoplay、loop,這些屬性跟audio的同名屬性類似,就不多提了。

video裡面的內容一樣可放置文字,來讓不支援HTML5的瀏覽器可以顯示。

瀏覽器支援音樂、影片列表

由於audio與video是使用瀏覽器自身來播放音樂與影片,故就要來稍微注意一下每個瀏覽器支援的音樂與影片格式有哪些了,底下是列表:

音樂格式支援

Browsermp3wavogg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaNOYESYES

影片格式支援

BrowserMP4WebMOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESNONO
OperaNOYESYES

看完上面的表,不知道各位有沒有發現,上面沒有一種格式可以在每個瀏覽器上皆可執行,那該怎麼辦呢?這時候就要來使用source標籤了!

source:設定音樂與影片的來源

media04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html><html><head><metacharset="utf-8" /><title>多媒體</title></head><body><p><audiocontrolsautoplayloop><sourcesrc="music.ogg"type="audio/ogg"><sourcesrc="music.mp3"type="audio/mpeg">
        對不起,您的瀏覽器不支援HTML5。
			</audio></p><p><videocontrolsautoplayloop><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg">
				對不起,您的瀏覽器不支援HTML5。
			</video></p></body></html>

將audio或video內的src屬性拿掉,換成在audio或video內容內加入來source標籤,每個source標籤就代表一個音樂或是影片的來源,瀏覽器在讀的時候會照順序找尋可播放的來源,若找到有可以播放的來源時,就會播放。

最後給各位一個不錯的支援多瀏覽器的方法如下:

media05.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
<p><audiocontrolsautoplayloop><sourcesrc="music.ogg"type="audio/ogg"><sourcesrc="music.mp3"type="audio/mpeg"><embedsrc="music.ogg" /></audio></p><p><videocontrolsautoplayloop><sourcesrc="movie.mp4"type="video/mp4"><sourcesrc="movie.ogg"type="video/ogg"><embedsrc="movie.mp4" /></video></p>
...

除了原本加source的版本外,在給不支援HTML5的瀏覽器就用embed來取代,這樣就又可以支援更多的瀏覽器了!

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML5 Audio:http://www.w3schools.com/html/html5_audio.asp
  3. w3schools.com > HTML5 Video:http://www.w3schools.com/html/html5_video.asp
Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.