【jQuery】使用ColorBox來撥放影片

ColorBox - a jQuery lightbox

---

A lightweight customizable lightbox plugin for jQuery

最近接到的Case是要在網頁上撥放影片
影片格式是wmv
所以嵌入式的做法是使用object標籤
參數autostart可以決定是否自動撥放影片

<object type="video/x-ms-asf" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
    <param name="url" value="file_name.wmv">
    <param name="autostart" value="0">                              
    <embed type="application/x-mplayer2" src="file_name.wmv"                                                    
    pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

上述做法是傳統嵌入式方法
如果使用 jQuqery 的 plug-in ColorBox 的話
就可以使用類似廣告效果的方式來呈現影片
使用 colorbox 除了要引入 jquery 以及 colorbox 函式外
也要記得加上 colorbox 這個 css 檔案，否則就會少了只凸顯影片的效果
下面這個例子是 colorbox 使用 youtube 的例子，

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="../colorbox/jquery.colorbox.js"></script>
<script>
    $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:425, innerHeight:344});
    };
</script>
<p>
<a class='youtube' href="http://www.youtube.com/embed/617ANIA5Rqs?  rel=0&wmode=transparent" title="Movie Title">Flash / Video (Iframe/Direct Link To YouTube)</a>
</p>

因為一開始有說這個Case的影片格式是wmv
所以我的作法是結合兩種方式，先寫一個網頁用第一種方式播放內嵌 wmv 影片
然後再用連結的方式開啟這個內嵌影片檔的網頁
另外因為這個網頁上還有別的 JavaScript 外掛播放 swf 動畫
而且在影片播放的時候這段動畫沒有變成背景，非常難看，不整齊！
所以我就讓 colorbox 在開啟時將動畫隱藏起來，撥放結束再還原動畫
使用 onOpen 跟 onClosed 兩個函式即可

    

點此播放影片廣告效果