HTML5 之 Video

在網頁放video除了用flash video 外,可用HTML5的code 。

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

Attribute

  • width=”320″  寬 320 px
  • height=”240″  高 240 px  [width & height 按 aspect ratio 放大縮小]
  • src=”movie.mp4″  檔案path 及名稱

大家可以修改attribute 來

  1. 不顯示控制列
  2. 自動播放

W3C測試 -> Try it yourself

Flash video vs HTML5 <video>

 Flash videoHTML5<video>
Install Plugin?Need to install browser plugin, Flash Player, to play the video.No plugin is needed
Browser compatibilityAll browser installed with plugin can play the videoNot all browser support HTML5
Supported file formatFLVMP4, WebM & Ogg
BrowserMP4WebMOgg
Internet Explorer 9YESNONO
Firefox 4.0NOYESYES
Google Chrome 6YESYESYES
Apple Safari 5YESNONO
Opera 10.6NOYESYES
  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec
  • WebM = WebM files with VP8 video codec and Vorbis audio codec
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec

Source: http://www.w3schools.com/html5/html5_video.asp