[轉載]在網頁上加入HTML5 的Video Tag，直接播放MP四、OGG…等

時間 2019-11-12

標籤轉載加入 html5 html video tag 直接播放 ogg 欄目 HTML5 简体版

原文原文鏈接

在以前有一篇文章提到HTML5(為何iPhone,iPod,iPad不支援Flash，HTML5將更普及於網路世界!!)的重要性，而Html 5的主要革新是在他的語意標籤，像是<video>、<audio>、<section>、<article>、<header>和<nav>這些，一看就知道是用在何處的標籤，將是Html 5的主要特點之一，今天我們要介紹的是<video>這個新標籤。通常人可能有個錯誤觀念是Htmh 5會播影片，這是一個錯誤的觀念，若是你真是這麼認為，下方有解說。html

本文章節：html5

1、將影片轉成MP四、OGG、Webm
2、讓Internet Explorer支援Htnl5
3、在網頁上加入HTML 5 的Video Tag，播放影片
4、效果展現
5、範例檔下載web

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

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

若是要將影片轉檔，我們能夠使用Miro Video Converter這款免費影片轉檔軟體，首先先下載軟體。oop

Miro Video Converter小檔案

軟體名稱：Miro Video Converter

軟體版本：3.0

系統支援：Windows XP/2003/Vista/7

介面語言：English

官方網站：http://mirovideoconverter.com/

檔案下載：下載Miro Video Converter、本站下載

軟體支援項目
輸入影片類型： AVI、H26四、MOV、WMV、XVID、Theora、MKV、FLV…等
輸出影片類型：MP四、Ogg、WebM、MP3(純音樂)…等
支援的裝置：Samsung Galaxy Y、Samsung Galaxy Mini、Samsung Galaxy Ace、Samsung Admire、Samsung Droid Charge、Samsung Galaxy S / SII / S Plus、Samsung Galaxy SIII、Samsung Galaxy Nexus、Samsung Galaxy Tab、Samsung Galaxy Tab 10.一、Samsung Galaxy Note、Samsung Galaxy Note II、Samsung Infuse 4G、Samsung Epic Touch 4G、HTC Wildfire、HTC Desire、HTC Droid Incredible、HTC Thunderbolt、HTC Evo 4G、HTC Sensation、HTC Rezound、HTC One X、Motorola Droid X、Motorola Droid X二、Motorola RAZR、Motorola XOOM、Sanyo Zio

1、將影片轉成MP四、OGG等格式

我們要把影片嵌到網頁裡，要怎麼作呢？根據w3schools所述，<video>標籤要使用時，必須提供兩種的影片格式才能讓個瀏覽器都正常播放，因為不一樣瀏覽器所支援的影片格式不一樣，因此在製做時就必須提供兩種以上的格式，若都沒有則沒辦法播放，需再新增一段提示，來告知瀏覽者「你的瀏覽器不支援<video>這個標籤」。post

第1步 將軟體下載好之後，注意安裝時，這一個項目不用勾選，就著繼續安裝，就能夠開始使用了。google

第2步 接下來把你要轉檔的影片，按著託放到程式裡，或在程式裡點「Choose Files…」。檔案選擇好之後，就要轉檔了，在下面選擇「Format」>「Video」，然後選擇轉檔格式，若要讓HTML5標籤支援，我們有提供兩種以上的格式來讓瀏覽器選擇，一般「.mp四、.ogv」是必要的，「.webm」能夠選填。spa

第3步 都選好之後，點選下面的「Convert to Ogg Theora」，就能夠開始轉檔了。code

第4步 開啟轉檔後的資料夾，點選右側的「齒輪按鈕」>「Show output folder」，這就是轉出的檔案。

2、讓IE支援Html5

接著我要把轉出的影片檔案放到網頁裡面，因此我們先創建一個資料夾「Movie」，然後打原始碼編輯器，新建一個「.htm」或「.html」的檔案，然後就開始些網頁了。網頁的基本架構以下：

<html>
<head>
… …
</head>
<body>
… …
</body>
</html>

首先我們要讓瀏覽器看得懂HTML5，目前來說呢，大部分的瀏覽器都已經看得懂大部分的Html，就是有些版本的「IE」跟不上時代，像是IE8如下的瀏覽器幾乎都看不懂，在IE9才讓他看懂，因此我們須要使用到Html hack，目前有幾種做法，經過一番Google後網路上經常使用的還是外嵌一個「html5.js」，來讓IE的大部分瀏覽器讀懂Html5，所以我們要把如下這個hack加到網頁標籤</head>標籤的前面。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

這前三行使用的目的是，「if lt IE 9」指兼容IE9版本如下的瀏覽器，因為要宣告video這個標籤，讓過時的瀏覽器看得懂。接著我們要新增DOCTYPE宣告，把<head>標籤以上的都換成這一段，若是不懂本文下方有範例檔案。

<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" dir="ltr" lang="zh-TW">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" dir="ltr" lang="zh-TW">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" dir="ltr" lang="zh-TW">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="zh-TW">
<!--<![endif]-->
<head>

接下來我們就能夠來加入<video>的標籤了。

3、在網頁上加入HTML 5 的Video Tag，播放影片

接下來就要開始寫<video>標籤了，首先我們先看範例寫法。

<video id="movie" preload controls loop poster="poster.png" width="640" height="360">
  <source src="Yif-Magic.mp4" type="video/mp4" />
  <source src="Yif-Magic.ogv" type="video/ogg" />
  <source src="Yif-Magic.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="http://…/~.mp4″ />，例如： <source src="http://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>格式。」

原文地址:http://twweeb.org/html5-video-tag/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。