![建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器 建站技能get(1)— Asp.net MVC快速集成ckplayer网页视频播放器](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700)
故事背景大概是这样的,我厂两年前给山西晋城人民*做了一个门户网站(地址: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