建站技能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
   
   

建站技能get（1）— Asp.net MVC快速集成ckplayer网页视频播放器

原文：http://www.cnblogs.com/wenyang-rio/p/5200535.html