MENU

#Ckplayer# 用Ckplayer X做一个M3U8视频解析

October 13, 2019 • WEB,技术

做过影视站的朋友大多应该用过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>    
<script type="text/javascript" src="ckplayer.min.js"></script>
<script type="text/javascript">
    var videoObject = {
        container: '#video', //容器的ID或className
        variable: 'player',//播放函数名称
        poster:'res/poster.jpg',//封面图片
        autoplay:false,//自动播放
        video:“https://cdn.ilimeng.cn/Video/Sean%26Kaycee%E6%B7%B1%E6%83%85%E6%BC%94%E7%BB%8E%E7%BC%96%E8%88%9EFalse%20Confidence%20%E5%AE%98%E6%96%B9%E7%89%88.mp4”//播放地址
        };
    var player = new ckplayer(videoObject);
</script>

框架调用

上面是直接用引用代码调用的,如果想要做成解析,将播放地址做成URL参数也很简单,只需要把上面的代码放到一个HTML文件中稍作修改即可

<!DOCTYPE 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或className
        variable: 'player',//播放函数名称
        poster: '',//封面图片
        autoplay: false,//自动播放
        video: getQueryVariable("url") //播放地址
      };
      var player = new ckplayer(videoObject);</script>
  </body>

</html>
此时只要打开刚刚的HTML,递交URL参数就可以食用了

例:http://www.xxx.com/index.html?url=video.mp4

下面是iframe方式引入这个文件

<iframe width="100%" height="100%" src="http://www.xxx.com/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>

最后

其实很简单,但是很多人可能不知道,所以在此分享一下

另外附上示例中播放的视频
False Confidence - Noah Kahan l Choreography by Sean Lew l #BABE2019 l Sean & Kaycee

播放器下载

ckplayer.zip