HTML5+CSS3之播放視頻以及在IE8及以下的解決方案

H5中嵌入媒體，這是H5的一個新的特性，讓廣大前端開發人員如沐春風！

但需要注意的是IE8及以下版本不支持H5的音頻及視頻。

一、用 HTML5 的方法為頁面添加視頻或音頻

 <video src="myVideo.ogg"></video> 

此外還支持追加的附加屬性如 height 和 width：

<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't
understand HTML5?</video>

想要顯示默認的播放控制欄則需要追加 controls 屬性：

<video src="video/myVideo.mp4" width="640" height="480" controls>What, do
you mean you don't understand HTML5?</video>

我們還可以追加autoplay 屬性（不建議——因為大家都討厭自動播放的視頻，這是常識）

<video src="video/myVideo.mp4" width="640" height="480" controls autoplay>What, do
you mean you don't understand HTML5?</video>

上面的代碼所產生的效果如下圖所示：

其余的屬性還包括用來控制媒體預加載的 preload，用來重復播放視頻的 loop ，以及用來定義視頻縮略圖的 poster （這個屬性在視頻播放延遲時非常有用）

<video src="video/myVideo.mp4" width="640" height="480" controls autoplay
preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't
understand HTML5?</video>

二、關於媒體格式以及為IE8及以下版本提供備用方案

由於目前的情況是，一些瀏覽器支持某一套視頻和音頻文件格式，而另一些瀏覽器則支持其他格式。

例如：Safari只允許在 <video> 和 <audio> 元素中使用 MP4/H.264/AAC媒體文件，而 Firefox 和

Opera則只支持 Ogg和 WebM。

幸好我們有解決方案，利用source來設置媒體文件，為瀏覽器提供一系列備用方案。

<video width="640" height="480" controls autoplay preload="auto" loop
poster="myVideoPoster.jpg">
<source src="video/myVideo.ogv" type="video/ogg">
<source src="video/myVideo.mp4" type="video/mp4">
What, do you mean you don't understand HTML5?
</video>

根據此方案，我們可以為IE8及以下追加一個flash：

<video width="640" height="480" controls autoplay preload="auto" loop poster=
"myVideoPoster.jpg">
<source src="video/myVideo.mp4" type="video/mp4">
<source src="video/myVideo.ogv" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash"
data="myFlashVideo.SWF">
<param name="movie" value="myFlashVideo.swf" />
<param name="flashvars" value="controlbar=over&amp;image=myVideoPoster.
jpg&amp; file=video/myVideo.mp4" />
<img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__"

title="No video playback capabilities, please download the video below" />
</object>
<p> <b>Download Video:</b>
MP4 Format: <a href="myVideo.mp4">"MP4"</a>
Ogg Format: <a href="myVideo.ogv">"Ogg"</a>
</p>
</video>