建站技能get（1）— Asp.net MVC快速集成ckplayer網頁視頻播放器

       故事背景大概是這樣的，我廠兩年前給山西晉城人民政府做了一個門戶網站（地址：http://jccq.cn/），運行了一年多固若金湯，duang的有一天市場部門過來說，新聞管理模塊帶視頻的內容播放不了了。

       迅雷不及掩耳，我打開網頁F12一看，因為找不到視頻播放的一個swf文件，仔細一看這個文件竟然引用的是其他網站的一個文件，立馬打開相對網站的主功能變數名稱，原來是人家網站改版了，這個文件幹掉了，導致播放不了。

       做這塊功能的同事實在是太粗心，不過顧不上了，為了儘快解決線上問題，開始嘗試修複，隨即找了優酷的插件拿來替換，發現不行，又找了其他幾個類似的，仍然不好用。

       條條大路通羅馬，我就不信邪，然後就嘗試用個全新的視頻播放插件，就是今天要說的這個網頁視頻播放器插件：ckplayer（官方地址）

       大概看了下官網的demo，發現裡面介紹和實現方式偏複雜化了，經過我自己分析測試，總結出只需簡單三步就可以配置一個網頁播放器，如下：

1. 下載ckplayer插件
   http://vdisk.weibo.com/lc/2jUo9DSIlRXvDAOV8ZD 密碼：BS6T
   
   
2. 添加js引用並配置js（核心代碼說明：initCKPlayer('視頻所要顯示的容器一般定義個div', '視頻地址', '插件swf文件');）
   

   <script type="text/javascript" src="/Scripts/ckplayer/ckplayer.js"></script>
         <script type="text/javascript">
           $(function () {
               //設置視頻容器大小
               winResize();
               $(window).resize(function () {
                   winResize();
               });
               //初始化視頻容器
               initCKPlayer('video-box', '$!{Model.Address}', '/scripts/ckplayer/ckplayer.swf');
           });
           //改變大小函數
           function winResize() {
               if ($(".section").width() == 1180) {
                   $(".video-box").width(840);
                   $(".video-box").height(473);
               } else {
                   $(".video-box").width(601);
                   $(".video-box").height(338);
               }
           }
   
   //初始化視頻播放器需配合ckplayer.js使用
   function initCKPlayer(boxId, videoSrc, playerSrc){
       var flashvars={
           f:videoSrc,
           c:0,
           loaded:'loadedHandler'
       };
       var video=[videoSrc];
       CKobject.embed(playerSrc,boxId,'video_v1','100%','100%',false,flashvars,video);
   }
   </script>
   
   //定義一個容易展示視頻
   <div class="video-box" id="video-box">
   </div>　　

3. 查看效果地址如下：http://jccq.cn/Engine/VideoView?id=f929f21a-1c17-42ff-8c7e-0b96278359c0