故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址: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() == ) {
    $(".video-box").width();
    $(".video-box").height();
    } else {
    $(".video-box").width();
    $(".video-box").height();
    }
    } //初始化视频播放器需配合ckplayer.js使用
    function initCKPlayer(boxId, videoSrc, playerSrc){
    var flashvars={
    f:videoSrc,
    c:,
    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网页视频播放器的更多相关文章

  1. 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  3. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  4. 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. ASP.NET MVC 5 - 给数据模型添加校验器

    在本节中将会给Movie模型添加验证逻辑.并且确保这些验证规则在用户创建或编辑电影时被执行. 拒绝重复 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己(DRY ...

  7. 如何在 ASP.NET MVC 中集成 AngularJS(3)

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS(2)

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS(1)

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

随机推荐

  1. WiX Toolset 教程索引页

    注意:虽然WiX Toolset功能强大,但其学习曲线相对较高.请慎重选择: 若没有足够时间.没心思搞的请绕行至inno setup.installshield.nisi.setupfactory.. ...

  2. D3中动画(transition函数)的使用

    关于transition的几个基本点: 1. transition()是针对与每个DOM element的,每个DOM element的transition并不会影响其他DOM element的tra ...

  3. Maven的配置和使用(二)

    Maven仓库 使用Maven带给我们一个比较直接的好处是管理jar包,这些jar包默认地址是在C:\Users\用户名.m2 目录下,我们来修改下这个地址: 现在自己想建立的仓库地址的路径下新建文件 ...

  4. 光标失去焦点事件 onblur

    onblur="judgeLandCode()" function judgeLandCode(){ $.ajax({ type:'post', dataType:'json', ...

  5. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

  6. 未能加载文件或程序集“Microsoft.ReportViewer.WinForms 解决办法

    异常信息: 未能加载文件或程序集“Microsoft.ReportViewer.WinForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken= ...

  7. SQL执行效率和性能测试方法总结

    对于做管理系统和分析系统的程序员,复杂SQL语句是不可避免的,面对海量数据,有时候经过优化的某一条语句,可以提高执行效率和整体运行性能.如何选择SQL语句,本文提供了两种方法,分别对多条SQL进行量化 ...

  8. c#比较两个List相等

    1.if(ListA.Count == ListB.Count && ListA.Count(t => !ListB.Contains(c)) == 0) 数量相等,元素值相等即 ...

  9. python 编码问题

    参考原文:http://www.crifan.com/eclipse_pydev_console_messy_char_for_console_is_utf8/ 通用 rq = urllib.urlo ...

  10. React-native之持久化保存----AsyncStorage

    AsyncStorage AsyncStorage是一个简单的,未加密的,异步的,持久化,关键值存储系统,是全局的. iOS中存储类似于NSUserDefault,存储问plist文件存放在设备中. ...