MENU

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

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

做过影视站的朋友大多应该用过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文件中稍作修改即可

<!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

最后编辑于: 2023 年 11 月 29 日
添加新评论

已有 3 条评论
  1. 所以我还是没有看明白怎么玩。。。

  2. 这个页面好优秀,既有代码又有完美演示

  3. feng feng

    如何实现视频播放结束自动播放下一个视频