做过影视站的朋友大多应该用过 Ckplayer 这款播放器，目前大部分的站用的都是 Ckplayer 或者 Dplayer。播放器功能强大，支持 HTML5 和 flashplayer 播放（另外官方还有一个 HTML5 的播放器叫 Chplayer）， 支持 MP4、M3U8、FLV 和 RTMP 协议的直播，支持插入广告，支持自定义风格等等，你完全可以利用它打造一个属于自己的网页播放器。
Ckplayer 简介 ckplayer 是一款在网页上播放视频的免费软件，主要特点是：免费，小巧，功能强大，定制方便。 任何商业网站及非商业网站（包括个人，公益网站）在满足以下条件的基础上都可以免费使用： 1：不非法修改右键版权，本条排除用户自定义的 “CKKEY” 2：不使用官方 “CEKEY” 来加密视频地址，本条不包含用户自己定义的 “CKKEY” 3：不使用 “CVKEY” 来加密 PC 端的 flashplayer 环境所使用的 m3u8 格式视频 摘自：Ckplayer 官方介绍
播放器演示
代码
<div id="video" style="width: 100%; height: 100%;"></div><!--注意将这里的ckplayer.min.js换成自己的路径--><script type="text/javascript" src="ckplayer.min.js"></script><script type="text/javascript">var videoObject = {container: '#video', //容器的ID或classNamevariable: 'player',//播放函数名称poster:'res/poster.jpg',//封面图片autoplay:false,//自动播放video:“MyVideo.mp4”//视频资源地址};var player = new ckplayer(videoObject);</script>
框架调用
上面是直接用引用代码调用的，如果想要做成解析，将播放地址做成 URL 参数也很简单，只需要把上面的代码放到一个 HTML 文件中稍作修改即可
HTML代码
<html><head><meta charset="UTF-8"><title>ckplayer</title><style type="text/css">html,body{height:100%}body{margin:0;padding:0px;font-family:"Microsoft YaHei",YaHei,"微软雅黑",SimHei,"黑体";font-size:14px}</style></head><body><div id="video" style="width: 100%; height: 100%;"></div><script type="text/javascript" src="ckplayer.min.js"></script><script type="text/javascript">function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return (false);}var videoObject = {container: '#video',//容器的ID或classNamevariable: 'player',//播放函数名称poster: '',//封面图片autoplay: false,//自动播放video: getQueryVariable("url") //播放地址};var player = new ckplayer(videoObject);</script></body></html>
iframe 方式调用
此时只要打开刚刚的 HTML，递交 URL 参数就可以食用了
例：http (s):// 你的域名 /index.html?url=video.mp4
下面是 iframe 方式引入这个文件
<iframe width="100%" height="100%" src="http(s)://你的域名/index.html?url=video.mp4" frameborder="0"border="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen"msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"></iframe>
最后
本例只是介绍下 Ckplayer 的简单使用技巧，有不明白的地方欢迎留言
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
