The Will Will Web

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

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

📅 2009/05/28 16:58 📁 JavaScript

我們最近有個需求需要在首頁播放 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)

相關連結

留言評論