The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

使用 jQuery Media Plugin 實做影片播放前預覽圖片功能

我們最近有個需求需要在首頁播放 wmv 影片,但為了不驚擾使用者,所以預設是不自動播放的,但是在頁面中宣告載入影片的地方卻會黑黑的一片 (如下圖示),因此客戶就要求說要先顯示一張圖片,然後點擊圖片後再播放影片。雖然不是個很難的功能,但我找到了個 jQuery Media Plugin 可以很方便的幫我處理這個需求。

當載入 Media Player ActiveX 時若預設不自動播放影片會顯示黑壓壓的一片 

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
    • 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 ( 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>

主要需注意的地方只有幾點:

  1. 設定一個圖片用來做影片預覽或進行播放影片用的示意圖,高度寬度需先指定。
  2. 在套用一個 A 標籤 (超連結),並套上 class 屬性,並明確指定播放時影片的高度(height)、寬度(width)、與是否自動播放(autoplay)。
  3. 然後在 A 標籤再多加上一個 onclick 事件,用以啟用 jQuery Media Plugin,並記得加上 return false; 避免直接下載 video1.wmv 影片。

不過目前的最新版 ( v0.90 ) 有些問題,無法正確解析設定在 <a> 標籤 class 屬性中的選項值(Options),我有對 jquery.media.js 做出一些錯誤修正,需要的人可以到以下網址下載:

jquery.media.js (15.40 kb)

相關連結