故事背景大概是这样的,我厂两年前给山西晋城人民政府作了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来讲,新闻管理模块带视频的内容播放不了了。javascript
迅雷不及掩耳,我打开网页F12一看,由于找不到视频播放的一个swf文件,仔细一看这个文件居然引用的是其余网站的一个文件,立马打开相对网站的主域名,原来是人家网站改版了,这个文件干掉了,致使播放不了。java
作这块功能的同事实在是太粗心,不过顾不上了,为了尽快解决线上问题,开始尝试修复,随即找了优酷的插件拿来替换,发现不行,又找了其余几个相似的,仍然很差用。ide
条条大路通罗马,我就不信邪,而后就尝试用个全新的视频播放插件,就是今天要说的这个网页视频播放器插件:ckplayer(官方地址)函数
大概看了下官网的demo,发现里面介绍和实现方式偏复杂化了,通过我本身分析测试,总结出只需简单三步就能够配置一个网页播放器,以下:测试
<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>