HTML5 視訊

有不同的方式在網頁上播放視訊。

在 HTML 文件中嵌入視訊

將視訊插入網頁並不容易，因為瀏覽器沒有統一的標準來定義嵌入的媒體檔案。

在本章中，我們將演示在網頁上新增視訊的方法，如最新的 HTML5 <video> 元素。

使用 HTML5 視訊元素

新推出的 HTML5 <video> 元素提供了一種在網頁中嵌入視訊的標準方法。但是，視訊元素相對較新，但它適用於大多數現代 Web 瀏覽器。以下示例僅使用瀏覽器預設控制元件集將視訊插入 HTML5 文件，並使用一個源。

<video controls="controls" src="shuttle.mp4">
    Your browser does not support the HTML5 Video element.
</video>

使用瀏覽器預設控制元件集和其他來源的視訊。

<video controls="controls">
    <source src="shuttle.mp4" type="video/mp4">
    <source src="shuttle.ogv" type="video/ogg">
    Your browser does not support the HTML5 Video element.
</video>

使用 object 元素

<object> 元素用於將不同型別的媒體檔案嵌入到 HTML 文件中。最初，此元素用於插入 ActiveX 控制元件，但根據規範，物件可以是任何媒體物件，如視訊、音訊、Java 小程式、ActiveX、文件（HTML、PDF、Word 等）、Flash 動畫或甚至影象。

以下程式碼片段將 Flash 視訊嵌入到網頁中。

<object data="blur.swf" width="400px" height="200px"></object>

只有支援 Flash 的瀏覽器或應用才能播放此視訊。

警告： <object> 元素不受廣泛支援，並且在很大程度上取決於要嵌入的物件的型別。在許多情況下，其他方法可能是更好的選擇。iPad 和 iPhone 無法顯示 Flash 視訊。

使用 <embed> 元素

<embed> 元素用於將多媒體內容嵌入到 HTML 文件中。

以下程式碼片段將 Flash 視訊嵌入到網頁中。

<embed src="blur.swf" width="400px" height="200px">

警告： 但是，<embed> 元素在當前瀏覽器中得到了很好的支援，並在 HTML5 中被定義為標準，但由於缺乏對 Flash 的瀏覽器支援或外掛不可用，你的視訊可能無法播放。