# 使用 jQuery Media Plugin 實做影片播放前預覽圖片功能
我們最近有個需求需要在首頁播放 wmv 影片，但為了不驚擾使用者，所以預設是不自動播放的，但是在頁面中宣告載入影片的地方卻會黑黑的一片 (如下圖示)，因此客戶就要求說要先顯示一張圖片，然後點擊圖片後再播放影片。雖然不是個很難的功能，但我找到了個 [jQuery Media Plugin](http://www.malsup.com/jquery/media/) 可以很方便的幫我處理這個需求。
[jQuery Media Plugin](http://www.malsup.com/jquery/media/) 不止可以播放 wmv 影片，還支援多種影片格式，其中包括：
- Quicktime
- aif, aiff, aac, au, bmp, gsm, mov, mid, midi, mpg, mpeg, mp4, m4a, psd, qt, qtif, qif, qti, snd, tif, tiff, wav, 3g2, 3pg
- Flash
- flv, mp3, swf
- Windows Media Player
- asx, asf, avi, wma, wmv
- Real Player
- ra, ram, rm, rpm, rv, smi, smil
- Silverlight
- xaml
- iframe
- html, pdf
如此多的影片、動畫格式之外，還支援 [sIFR](https://web.archive.org/web/20220412004535/http://wiki.novemberborn.net/sifr) ( Scalable Inman Flash Replacement )，甚至於其他文件格式(pdf, html)，都可以透過這套 [jQuery Media Plugin](http://www.malsup.com/jquery/media/) 進行動態載入的工作，如果副檔名是尚未定義的，你還可以自行定義播放器與副檔名的對應，可說是非常的實用。
[jQuery Media Plugin](http://www.malsup.com/jquery/media/) 的運作原理也很簡單，先宣告一個 標籤，套上 class="media" 類別樣式，然後執行此 Plugin： $('a.media').media();
要實做影片播放前預覽圖片的功能就變的十分容易，如下 HTML 應該很容易理解：
```
```
主要需注意的地方只有幾點：
1. 設定一個圖片用來做影片預覽或進行播放影片用的示意圖，高度寬度需先指定。
2. 在套用一個 A 標籤 (超連結)，並套上 class 屬性，並明確指定播放時影片的高度(height)、寬度(width)、與是否自動播放(autoplay)。
3. 然後在 A 標籤再多加上一個 onclick 事件，用以啟用 [jQuery Media Plugin](http://www.malsup.com/jquery/media/)，並記得加上 return false; 避免直接下載 video1.wmv 影片。
不過目前的最新版 ( v0.90 ) 有些問題，無法正確解析設定在 標籤 class 屬性中的選項值(Options)，我有對 jquery.media.js 做出一些錯誤修正，需要的人可以到以下網址下載：
> [jquery.media.js (15.40 kb)](https://stwillblogassets.blob.core.windows.net/files/jquery.media.js)
**相關連結**
- [jQuery Media Plugin](http://www.malsup.com/jquery/media/)