前端工程師不能錯過的HTML5:嵌入影片元素video @ Java瑪奇朵-非本科系的IT吃喝電玩日誌

前端工程師不能錯過的HTML5:嵌入影片元素video

今天的HTML5入門課要來跟大家說一超好用的新增元素～還不知道如何嵌入影片的學員一定要看喔~

HTML5新增video元素-終於可以撥放影片了!

在 HTML5 版本出現之前，網頁排版只有<div>和<span>兩種元素而已，早已無法應付現今功能越來越齊全的網頁 —— 甚至連撥放影音的元素都沒有。在 HTML4，要在網頁中聽音樂或看到影片，只能透過像是 Flash 之類的外掛。而 HTML5 中的 <video> 元素提供了可直接在網頁中嵌入影片檔的方式。
要在 HTML5 中使用 <video> 元素嵌入影片檔的語法與結果範例如下：

See the Pen video element pt.1 by Tedutw (@Tedutw) on CodePen.

上述的<vidio controls>標籤作用為叫出影片撥放介面(撥放、全螢幕音量控制等)。若如上述的例子，影片檔案太大的話，也可以在<vidio>標籤內指長寬，範例如下:

See the Pen video element pt.1-width&height by Tedutw (@Tedutw) on CodePen.

<source src="...">元素可以指定撥放的影片檔 URL，後方的「type="video/mp4"」為宣告媒體種類(media type)的指令，在此例中宣告檔案類型是 mp4 檔。以下為檔案類型與媒體種類 (media type) 的對照：

檔案類型	媒體種類 (media type)
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 支援的音訊檔案有三種：MP4、WebM 與 OGG。
<video> 與 </video> 標籤中夾帶的「Video is not supported by your browser」，中譯為：「你的瀏覽器不支援 video 元素」，平時不會出現，只會在當使用者使用的瀏覽器不支援 <video> 元素時出現。較多人用的 Chrome 與 Firefox 瀏覽器支援所有被 HTML5 所支援的視訊檔「.mp4」、「.webm」與「.ogg」。但是 IE 與 Safari 瀏覽器就就不支援副檔名為「.webm」與「.ogg」的視訊檔。