美國NASDAQ上市公司
外商IT教育培訓企業

0800-777-100


週一到週五 09:00~21:00 週六到週日 09:00~18:00

前端工程師HTML5入門課程(5)-video影片嵌入

  • 時間:2019-05-29
  • 發布:達內教育台灣
  • 來源:達內教育台灣 > 知識庫 > 前端工程師/網頁設計教學

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

<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. HTML5的7個內容模組Content Models
  2. header,nav與footer元素
  3. article,section與aside元素
  4. audio影片嵌入元素
  5. video影片嵌入元素
  6. progress載入進度顯示條
上一篇:前端工程師HTML5入門課程(4)-audio音訊嵌入元素
下一篇:前端工程師HTML5入門課程(6)-progress載入進度顯示條
使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之1-秒懂你的使用者

等網頁Loading等到想睡著的男性圖片|SEO優化|達內教育

2018年SEO 8部曲之2-你的網頁夠快嗎?

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之3-Title與Meta Description還是要做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO 8部曲之4-原來URL也可以做SEO優化

使用Macbook搜尋網頁的貓咪圖片|SEO優化|達內教育

2018年SEO八部曲之5-圖片的 SEO 優化

使用平板電腦搜尋網頁的使用者圖片|SEO優化|達內教育

2018年SEO八部曲之7-Schema結構化資料

 

選擇城市和中心
貴州省

廣西省

海南省