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

做过影视站的朋友大多应该用过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或className
        variable: 'player',//播放函数名称
        poster:'res/poster.jpg',//封面图片
        autoplay:false,//自动播放
        video:“MyVideo.mp4”//视频资源地址
        };
    var player = new ckplayer(videoObject);
</script>

框架调用

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

HTML代码

iframe方式调用

<!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(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的简单使用技巧，有不明白的地方欢迎留言

播放器整合包下载

ckplayer.zip

文章目录

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

2019 年 10 月 13 日 • 阅读: 7667 • 技法笔记

Ckplayer 简介

播放器演示

框架调用

最后

播放器整合包下载