html5 嵌入視頻

HTML5 的到來(lái)之前,每個(gè)視頻的播放都需要通過(guò) web 瀏覽器中通過(guò)第三方瀏覽器插件。最初我們親眼目睹 RealPlayer，接著是 Windows Media Player 和 QuickTime, 現(xiàn)在是 Flash,這是目前主導(dǎo)的插件,播放大量的網(wǎng)絡(luò)視頻。
HTML5 引入了一個(gè)新的標(biāo)準(zhǔn)在 web 頁(yè)面中嵌入和播放視頻,無(wú)任何第三方插件,只需使用一個(gè)視頻元素。 似乎是容易的,對(duì)嗎? 但是你會(huì)發(fā)現(xiàn)沒有這樣的一個(gè)視頻格式,適用于目前所有 HTML5 web 瀏覽器。

大兼容瀏覽器 HTML5 視頻,我們推薦你的視頻編碼轉(zhuǎn)成如下HTML5視頻格式，并在將它們嵌入到你的網(wǎng)頁(yè)。

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

如果你只有一個(gè) HTML5 視頻文件嵌入到網(wǎng)頁(yè),您可以簡(jiǎn)單地鏈接到它的 src 屬性

Embed HTML5 video single source 嵌入單一來(lái)源視頻

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

Embed HTML5 video multiple sources 嵌入多來(lái)源視頻

多個(gè)視頻上面所提到的,是為了大的 HTML5 視頻瀏覽器兼容性，我們需要3個(gè)不同版本的視頻。 您可以在web頁(yè)面中嵌入多個(gè) 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>

現(xiàn)在,讓我們?nèi)⒑?bào)圖片添加到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>

結(jié)果如下如何播放 HTML5 視頻? 只需添加 autoplay=”autoplay” 或簡(jiǎn)單的autoplay 到 video 標(biāo)簽即可。 如下

<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>