我們最近有個需求需要在首頁播放 wmv 影片，但為了不驚擾使用者，所以預設是不自動播放的，但是在頁面中宣告載入影片的地方卻會黑黑的一片 (如下圖示)，因此客戶就要求說要先顯示一張圖片，然後點擊圖片後再播放影片。雖然不是個很難的功能，但我找到了個 jQuery Media Plugin 可以很方便的幫我處理這個需求。
jQuery Media Plugin 不止可以播放 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
- Windows Media Player
- Real Player
- ra, ram, rm, rpm, rv, smi, smil
- Silverlight
- iframe
如此多的影片、動畫格式之外，還支援 sIFR ( Scalable Inman Flash Replacement )，甚至於其他文件格式(pdf, html)，都可以透過這套 jQuery Media Plugin 進行動態載入的工作，如果副檔名是尚未定義的，你還可以自行定義播放器與副檔名的對應，可說是非常的實用。
jQuery Media Plugin 的運作原理也很簡單，先宣告一個 <a> 標籤，套上 class="media" 類別樣式，然後執行此 Plugin： $('a.media').media();
要實做影片播放前預覽圖片的功能就變的十分容易，如下 HTML 應該很容易理解：
<a class="media {width:260, height:195, autoplay:1}" href="video1.wmv"
onclick="$(this).media();return false;">
<img src="/images/video1_image.jpg" width="260" height="195" />
</a>
主要需注意的地方只有幾點：
- 設定一個圖片用來做影片預覽或進行播放影片用的示意圖，高度寬度需先指定。
- 在套用一個 A 標籤 (超連結)，並套上 class 屬性，並明確指定播放時影片的高度(height)、寬度(width)、與是否自動播放(autoplay)。
- 然後在 A 標籤再多加上一個 onclick 事件，用以啟用 jQuery Media Plugin，並記得加上 return false; 避免直接下載 video1.wmv 影片。
不過目前的最新版 ( v0.90 ) 有些問題，無法正確解析設定在 <a> 標籤 class 屬性中的選項值(Options)，我有對 jquery.media.js 做出一些錯誤修正，需要的人可以到以下網址下載：
jquery.media.js (15.40 kb)
相關連結