Board logo

標題: [介紹] 網頁上加入HTML5的Video Tag 播放影片 [打印本頁]

作者: dannyliao    時間: 2016-12-22 17:11     標題: 網頁上加入HTML5的Video Tag 播放影片

Html 5的主要革新是在他的語意標籤,像是<video>、<audio>、<section>、<article>、<header>和<nav>這些,一看就知道是用在何處的標籤,將是Html 5的主要特色之一,今天我們要介紹的是<video>這個新標籤。一般人可能有個錯誤觀念是Htmh 5會播影片,這是一個錯誤的觀念,如果你真是這麼認為,下方有解說。

事實上,HTML 5是不能播影片的,他是利用網頁和瀏覽器搭載的CSS與Java所做到效果,先是利用HTML 5「語意標籤」中的<video>,去執行;而現在所做出來的瀏覽器大多數都支援HTML5,H.264是可以不碰到 Flash的一種編碼,而H.264是目前iPad/iPhone/iPod上唯一支援的編碼格式、也是大多數數位相機、攝影機所拍攝出來的格式。

總而言之,我們現在要使用Html 5的video tag來播放既有的影片,然而並非所有的瀏覽器都支援Html5,目前FireFox、Chrome、Safari預設都以支援,不過IE仍需額外的指令才能支援,關於這些前置步驟本文下方會一一做介紹。至於要使瀏覽器播放影片的原始檔,因為各瀏覽器預設支援不同,所以像是Firefox僅支援.ogg、.ogv,而Chrome支援.mp4在這種不一的情況下,我們在製作原始檔案時,就必須製作多種格式才能讓個瀏覽器支援。

首先我們要讓瀏覽器看得懂HTML5,目前來說呢,大部分的瀏覽器都已經看得懂大部分的Html,就是有些版本的「IE」跟不上時代,像是IE8以下的瀏覽器幾乎都看不懂,在IE9才讓他看懂.

接下來就要開始寫<video>標籤了,首先我們先看範例寫法。
引用:
<video id="movie" preload controls loop poster="poster.png" width="640" height="360">
  <source src="adj.mp4" type="video/mp4" />
  <source src="adj.ogv" type="video/ogg" />
  <source src="adj.webm" type="video/web" />
  您的瀏覽器不支援HTML 5影片播放標籤<video>格式。
  Your browser doesn't support the <video> tag.
</video>
標籤解釋
引用:
* 首先整個HTML我們是使用<video></video>兩的標籤來包著,前面代表開始,後面代表結束。
* <video>標籤裡面有幾個屬性,你可以使用,用法如下:
* autoplay(自動播放):你可以輸入"autoplay"(開啟自動播放)、"" (空白字串,開啟自動播放)、或不輸入(開啟自動播放)。
* preload(預先載入):你可以輸入"none"(關閉預先載入)、"metadata"(開啟預先載入)、"auto"(自動)、"" (空白字串,開啟預先載入)、或不輸入(開啟預先載入)。
* controls(控制按鈕):你可以輸入"controls"(開啟控制按鈕)、"" (空白字串,開啟)、或不輸入(開啟)。
* 瀏覽器預設是沒有其他控制項目的,如果你開啟,你可以提供一些播放控制元件,播放、暂停、定位、音量、全螢幕、字幕(如果可用)、聲道(如果可用),這些可以透過額外的Javascript來完成。
* loop(播放循環):你可以輸入"loop"(開啟循環)、"" (空白字串,開啟)、或不輸入(開啟)。
* poster(預覽圖片):用來選擇影片播放前,所顯示的圖片,不能空白,若要使用此屬性則請輸入圖片網址。
* height(影片高度):請輸入非負的整數,不需輸入單位(px,pixel)。
* width(影片寬度):請輸入非負的整數,不需輸入單位(px,pixel)。
* muted(靜音):你可以輸入"muted" (開啟靜音)、"" (空白字串,開啟)、或不輸入(開啟)。
* src(影片位置):放置影片原始檔的網址,或相對位址。
所以上面提供的範例意思是「這個影片我要有控制按鈕,要預先載入影片,然後影片結束之後要循環播放,在開始播放之前,顯示預覽圖片,寬是640px,高是360px」。
* 再來是中間的<source … />標籤,意思是影片的原始檔位置與類型。
* 檔案位置請用「src="檔案位置"」,這個屬性,如果影片和網站在相同的資料夾,則在「檔案位置」中直接輸入影片檔名(主檔名+副檔名),如果不是,你可以直接輸入網址如<source src="https://…/~.mp4″ />,例如: <source src="https://example/html5-video-tag/Yif-Magic.mp4″ />
* 類型的選擇請用「type="video/檔案類型"」,例如,如果附檔名是「.mp4」,則類型的選擇請寫「type="video/mp4″」;如果是「.webm」,則寫「type="video/web"」;注意,如果是「.ogv」,則類型的選擇請寫「type="video/ogg“」,不要問我為什麼,因為我也不知道這個地方就會不一樣。如果想知道個多可以上網Google。
* 再來是針對那些無法播放影片的瀏覽者,告訴他們原因,所以我們在</video>的前面告訴他們:「您的瀏覽器不支援HTML 5影片播放標籤<video>格式。」
參考資料: https://twweeb.org/html5-video-tag/




歡迎光臨 ADJ網路實驗室 (http://dz.adj.idv.tw/) Powered by Discuz! 6.0.0