嵌入視訊到html5頁面

HTML5 的到來之前,每個視訊的播放都需要通過 web 瀏覽器中通過第三方瀏覽器外掛。最初我們親眼目睹 RealPlayer，接著是 Windows Media Player 和 QuickTime, 現在是 Flash,這是目前主導的外掛,播放大量的網路視訊。

HTML5 引入了一個新的標準在 web 頁面中嵌入和播放視訊,無任何第三方外掛,只需使用一個視訊元素。 似乎是容易的,對嗎? 但是你會發現沒有這樣的一個視訊格式,適用於目前所有 HTML5 web 瀏覽器。

最大相容瀏覽器 HTML5 視訊,我們推薦你的視訊編碼轉成如下HTML5視訊格式，並在將它們嵌入到你的網頁。

• H.264(Baseline) 在 mp4 容器。
• VP8/WEBM 在 webm 容器。
• Theroa/Vorbis 在 ogv 容器。

如果你只有一個 HTML5 視訊檔案嵌入到網頁,您可以簡單地連結到它的 src 屬性

Embed HTML5 video single source 嵌入單一來源視訊

<video src="samplevideo.webm" width="640" height="480" autoplay></video>

Embed HTML5 video multiple sources 嵌入多來源視訊

多個視訊上面所提到的,是為了最大的 HTML5 視訊瀏覽器相容性，我們需要3個不同版本的視訊。 您可以在web頁面中嵌入多個 HTML5 視訊在HTML5 視訊元素,例子:

原始碼詳見下面：

<video width="640" height="360" controls>
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://www.html5videoplayer.net/videos/toystory.webm" type="video/webm" />
<source src="http://www.html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
</video>

結果如下 

HTML5 video with poster image 新增海報圖片

現在,讓我們去將海報圖片新增到HTML5視訊。

<video poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4" />
<source src="http://www.html5videoplayer.net/videos/toystory.webm" type="video/webm" />
<source src="http://www.html5videoplayer.net/videos/toystory.ogv" type="video/ogg" />
</video>

結果如下

HTML5 video autoplay 視訊自動播放

如何播放 HTML5 視訊? 只需新增 autoplay=”autoplay” 或簡單的autoplay 到 video 標籤即可。 如下

<video autoplay="autoplay" poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" controls>

或

<video poster="http://www.html5videoplayer.net/poster/toystory.jpg" width="640" height="360" autoplay controls>

結果詳見下表

參考：http://www.html5videoplayer.net/html5video/embed-html5-video-into-web-pages/