注意

以下的程式碼皆是寫於<body>與</body>標籤之內。

<video>

<video>影片元素，這個元素是html5新增的。

src - 指定圖片位置，參考：HTML檔案路徑
controls - 是否顯示控制面版值：controls代表顯示 (預設為不顯示)
preload - 設定文檔是否先載入，攸關網頁載入速度。見下表。

值	解釋
metadata	當網頁載入時，僅先載入檔案的資訊(大小、長度)
none	當網頁載入時，不要同時加載檔案
auto (預設)	當網頁載入時，同時加載檔案

簡易示範

<p>影片來源：https://www.youtube.com/watch?v=5VkZtmPh1vg </p>

<video src="http://had.name/data/vid/0035-1.mp4" controls="controls" preload="metadata" style="width:100%; max-width:560px;">

<p>你的瀏覽器尚未支援HTML5的video元素，或不支援mp4格式</p>

</video>

行3：當瀏覽器過於腐朽無法支援時，將印出此段文字，若支援，則不印出。

影片來源：https://www.youtube.com/watch?v=5VkZtmPh1vg

相容各家瀏覽器

<video controls="controls" preload="metadata" style="width:560px;">

<source src="http://had.name/data/vid/0035-1.ogg" type="video/ogg"/>

<source src="http://had.name/data/vid/0035-1.mp4" type="video/mp4"/>

<p>你的瀏覽器尚未支援HTML5的video元素</p>

</video>

行2,3：並非所有瀏覽器都支援所有檔案格式，可利用<source>選擇不同的檔案，同時取代<video>內的src屬性

瀏覽器	MP4	WebM	Ogg
Internet Explorer	Yes	No	No
Chrome	Yes	Yes	Yes
Firefox	Yes	Yes	Yes
Safari	Yes	No	No
Opera	Yes	Yes	Yes

其他可用於<video>的屬性

loop - 值為loop時表重覆播放，不多加設定為不重覆播放
autoplay - 值為autoplay時表自動播放，不多加設定為不自動播放

< 前一節下一節 >