HTML5影片播放

傳統HTML播放影片是使用 object 或是 embed,不過這並不是影片專用的語法(參考HTML物件插入篇)。HTML5推出了標籤,讓我們可以更容易插入影片。不過目前各家瀏覽器支援的影片類型不太一樣,請參考下表:

Format IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

表格出自於W3Schools

基本語法為:

<video src="movie.mp4"></video>

支援多種影片格式的程式範例如下(瀏覽器會根據支援類型讀取):

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

範例結果參考:

影片來源:BBS鄉民小劇場09 復活篇