娶了UI設計師的Python工程師-北歐生活

現在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）的對照：

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」的視訊檔。

<video> 標籤中的「自動撥放」與「重複撥放」指令

上述提到，<video> 標籤可以讓音訊控制面板（功能有音量控制、撥放與暫停）顯現。除此之外，前端工程師還可以為 <video> 標籤下定義，指定音訊檔是否要自動撥放或是重複撥放。

自動撥放

若在 <video> 標籤中指定「自動撥放(<video controls autoplay>)」 ，則嵌入的視訊檔會在網頁 loading 好後自動撥放，不會事先問使用者是否要撥放。語法如下：（可點右方的「Result」按鈕看結果，即會自動撥放視訊。）

See the Pen video element pt.2-auto by Tedutw (@Tedutw) on CodePen.

重複撥放

若在 <video> 標籤中指定「重複撥放(<video controls loops>)」 ，則嵌入的視訊檔會在影片撥放完畢後自動重播。語法如下： (「Result」中的影片撥放結束後，即會自動重播視訊。)

See the Pen video element pt.2-loop by Tedutw (@Tedutw) on CodePen.

延伸閱讀看這裡：

前端工程師的HTML5必上入門課程(1)有哪7個內容模組?

前端工程師的HTML5必上入門課程(4)六個語意元素(上)

前端工程師的HTML5必上入門課程(5)六個語意元素(下)

門外漢想進科技產業不用怕!來達內教育,讓你學好學滿!

人工智慧拯救生命,燃起敗血症病患的希望

前端工程師都愛用的CSS,你懂它嗎?

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？