建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器
故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了。
迅雷不及掩耳,我打开网页F12一看,因为找不到视频播放的一个swf文件,仔细一看这个文件竟然引用的是其他网站的一个文件,立马打开相对网站的主域名,原来是人家网站改版了,这个文件干掉了,导致播放不了。
做这块功能的同事实在是太粗心,不过顾不上了,为了尽快解决线上问题,开始尝试修复,随即找了优酷的插件拿来替换,发现不行,又找了其他几个类似的,仍然不好用。
条条大路通罗马,我就不信邪,然后就尝试用个全新的视频播放插件,就是今天要说的这个网页视频播放器插件:ckplayer(官方地址)
大概看了下官网的demo,发现里面介绍和实现方式偏复杂化了,经过我自己分析测试,总结出只需简单三步就可以配置一个网页播放器,如下:
- 下载ckplayer插件http://vdisk.weibo.com/lc/2jUo9DSIlRXvDAOV8ZD 密码:BS6T
- 添加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> - 查看效果地址如下:http://jccq.cn/Engine/VideoView?id=f929f21a-1c17-42ff-8c7e-0b96278359c0

建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器的更多相关文章
- 【第三篇】ASP.NET MVC快速入门之安全策略(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第二篇】ASP.NET MVC快速入门之数据注解(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- ASP.NET MVC 5 - 给数据模型添加校验器
在本节中将会给Movie模型添加验证逻辑.并且确保这些验证规则在用户创建或编辑电影时被执行. 拒绝重复 DRY ASP.NET MVC 的核心设计信条之一是DRY: "不要重复自己(DRY ...
- 如何在 ASP.NET MVC 中集成 AngularJS(3)
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- 如何在 ASP.NET MVC 中集成 AngularJS(1)
介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...
随机推荐
- Officel常用操作
Excel: 1.隔行变色|菜单->条件格式->其它规则->使用公式->"=MOD(ROW(),2)=0" 2.查找包含特定字符的单元格,并替换整个单元格 ...
- [Unity3D]自制UnityForAndroid二维码扫描插件
一周左右终于将二维码生成和扫描功能给实现了,终于能舒缓一口气了,从一开始的疑惑为啥不同的扫码客户端为啥扫出来的效果不同?通用的扫描器扫出来就是一个下载APK,自制的扫描器扫出来是想要的有效信息,然后分 ...
- windows 物理内存获取
由于我一般使用的虚拟内存, 有时我们需要获取到物理内存中的数据(也就是内存条中的真实数据), 按理说是很简单,打开物理内存,读取就可以了.但似乎没这么简单: #include "window ...
- MIT 6.828 JOS学习笔记16. Lab 2.2
Part 3 Kernel Address Space JOS把32位线性地址虚拟空间划分成两个部分.其中用户环境(进程运行环境)通常占据低地址的那部分,叫用户地址空间.而操作系统内核总是占据高地址的 ...
- (转)论python工厂函数与内建函数
所谓工厂函数就是指这些内建函数都是类对象, 当你调用它们时,实际上是创建了一个类实例. 工厂函数: int(),long(),float(),complex(),bool() str(),unic ...
- Python爬虫学习(7):浙大软院网号嗅探
软院这边网速是挺不错的,而且在宿舍和实验室都是可以通过学号直接登陆的上网的,但是..有的时候实验室的台式机需要一个网号,笔记本需要一个网号,或者再加上一个路由器需要一个,然后,感觉网号托托的不够呀.刚 ...
- ajax返回json数据,对其中日期的解析
JS 对其格式化 方法如下 function ChangeDateFormat(d){ //将时间戳转为int类型,构造Date类型 var date = new Date(parseInt(d.ti ...
- mac homebrew的用法
与 MacPorts 类似,OS X 下还有款包管理工具为 Homebrew,安装方法也很简单. ruby -e "$(curl -fsSL https://raw.github.com/H ...
- DB Scan算法的分析与实现
摘自:http://www.cnblogs.com/weixliu/archive/2012/12/08/2808815.html 根据上面第二个数据集的簇的形状比较怪异,分簇结果应该是连起来的属于一 ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...