ckplayer插件播放视频

Posted 2020-10-03 Sealee

官网：超酷网页视频

本篇介绍：插件播放视频，  添加插件（额外的功能），  视频格式之间的转换

PC端一般都是利用插件（Flash）来播放视频，可以支持很多格式。网上很多说这个插件的，这里只是做个记录。

下载好，移动到我们的项目，开始测试。因为里面的功能有点多，你可以去看文档完成自己需要的需求，这里只是简单的记录。

我们PC一般会存放FLV格式视频，而MP4则使用与很多场景。 FLV体积小，速度快这也是为什么网站都选选择使用这个格式。

最简单的版本：

微信内置网页中用这种方式在android里面是可以播放FLV和Mp4格式。

<div id="a1"></div>       <%--视频的位子--%>
    <script src="jquery-1.11.2.min.js"></script>  
    <script src="ckplayer/ckplayer.js"></script>  <%--插件JS--%>
    <script type="text/javascript">

        //初始化视频容器
        initCKPlayer(\'a1\', \'/Video/1_0.mp4\', \'/ckplayer/ckplayer.swf\');
        //初始化视频播放器需配合ckplayer.js使用
        function initCKPlayer(boxId, videoSrc, playerSrc) {
            var flashvars = {
                f: videoSrc,
                c: 0                
            };
            var video = [videoSrc];
            CKobject.embed(playerSrc, boxId, \'video_v1\', \'600\', \'400\', true, flashvars, video); //false表示插件，true表示html标签播放，如果不是video所支持的类型不会显示
        }
    </script>

   常用对象属性。  
f:\'http://movie.ks.js.cn/flv/2011/11/8-1.flv\',//视频地址
      a:\'\',//调用时的参数，只有当s>0的时候有效
      s:\'0\',//调用方式，0=普通方法（f=视频地址），1=网址形式,2=xml形式，3=swf形式(s>0时f=网址，配合a来完成对地址的组装)
      c:\'0\',//是否读取文本配置,0不是，1是
      x:\'\',//调用xml风格路径，为空的话将使用ckplayer.js的配置
      i:\'\',//初始图片地址
      d:\'http://www.ckplayer.com/temp/11.jpg\',//暂停时播放的广告，swf/图片
      u:\'http://www.baidu.com\',//暂停时如果是图片的话，加个链接地址
      l:\'http://www.ckplayer.com/down/start.swf\',//视频开始前播放的广告，swf/图片/视频
      r:\'\',//视频开始前播放图片/视频时加一个链接地址
      t:\'1\',//视频开始前播放swf/图片时的时间
      e:\'3\',//视频结束后的动作，0是调用js函数，1是循环播放，2是暂停播放，3是调用视频推荐列表的插件
      v:\'85\',//默认音量，0-100之间
      p:\'1\',//视频默认0是暂停，1是播放
      h:\'1\',//播放http视频流时采用何种拖动方法，0是按关键帧，1是按关键时间点
      q:\'\',//视频流拖动时参考函数，默认是start
      m:\'0\',//默认是否采用点击播放按钮后再加载视频，0不是，1是,设置成1时不要有前置广告
      g:\'\',//视频直接g秒开始播放
      j:\'\',//视频提前j秒结束
      k:\'10|40|80\',//提示点时间，如 30|60鼠标经过进度栏30秒，60秒会提示n指定的相应的文字
      n:\'跳过开头|小企鹅宝宝下水了|跳过结尾\',//提示点文字，跟k配合使用，如 提示点1|提示点2
      b:\'0x000\',//播放器的背景色，如果不设置的话将默认透明
      w:\'\',//指定调用自己配置的文本文件,不指定将默认调用和播放器同名的txt文件
      //调用播放器的所有参数列表结束
      //以下为自定义的播放器参数用来在插件里引用的
      my_title:\'视频标题\',//视频标题
      my_url:\'http://www.ckplayer.com/index.php\',//本页面地址
      my_summary:\'这是一个测试页面\',//视频介绍，请保持在一行文字，不要换行
      my_pic:\'http://www.ckplayer.com/temp/11.jpg\'//分享的图片地址
      //调用自定义播放器参数结束

因为刚下的  里面的一些参数是他定义的，你需要改变播放页面的一些设置可以去修改他的js代码，每一个参数都有说明，仔细阅读就好了。

 注：如果想要设置页面上的位子，需要去改 style.swf里面的style.xml里面的一些格式，详情，去看官网。  比如：删除设置按钮

 

 

插件的调用

 查看文档

下载好插件，

①把 style.swf 改成zip的格式

②把你下载好的.swf添加到 style.zip里面，然后把后缀名改回来。

③ 打开你的ckplayer.js    把插件代码加入

④添加参数，还是在js里面

⑤初始化，清空cookie浏览

  var flashvars = {
                f: videoSrc,
                a: \'\',
                deft: \'标清,高清,超清,\', //配置文件里有，则不需要再设置
                deff: \'/Video/1_0.mp4?t=1|/Video/1_0.mp4?t=2|/Video/1_0.mp4?t=3\',  //后面注意带参数
                c: 0
                }

效果：

 

 注：你可以在案例的网站里面把他的案例代码扣出来，照着文档来写，把案例里面的代码复制出来。

 

 

 格式转化 -->转 FLV

官网：查看

  之前也说了,PC端存FLV格式，当然需要把格式转成FLV格式的。 这个进程还可以视频截图，很对的用法执行网上搜索。

这里需要一个程序（进程），FFMPEG。

 定义： 可以将一种视频格式（包括封转格式和编码格式）转换为另一种视频格式。转码器在视音频编解码处理的程序中，属于一个比较复杂的东西。因为它结合了视频的解码和编码。一个视频播放器，一般只包含解码功能；一个视频编码工具，一般只包含编码功能；而一个视频转码器，则需要先对视频进行解码，然后再对视频进行编码，因而相当于解码器和编码器的结合。

①下载 FFMPEG.exe

查看下载

②转化方法,第一个参数是你需要转换视频的路径（传的值是服务器的路径），第二个参数是一个格式为 flv的视频（已存在，需要自己准备一个）。根据自己修改也可以改成绝对地址。

这个方法是活的，你只用把最最后的那段启动程序的代码保留，其余的自己写。

    #region 视频格式转为Flv
        /// <summary>
        /// 视频格式转为Flv
        /// </summary>
        /// <param name="vFileName">原视频文件地址</param>
        /// <param name="ExportName">生成后的Flv文件地址</param>
        public bool ConvertFlv(string vFileName, string ExportName)
        {
            string ffmpegtool = Server.MapPath("~/Flv/ffmpeg.exe"); //你的ffmpeg.exe绝对路径

            if ((!System.IO.File.Exists(ffmpegtool)) || (!System.IO.File.Exists(Server.MapPath(vFileName))))
            {
                return false;
            }
           //可以添加一个flv格式的视频做模板，每次用的时候把视频Copy到另一个文件夹去转换，这里没有这样写，可以自己修改
            vFileName = Server.MapPath(vFileName);
            ExportName = Server.MapPath(ExportName);

            //别的格式转flv格式 命令
            string Command = " -i \\"" + vFileName + "\\" -y -ab 32 -ar 22050 -b 800000 -s  480*360 \\"" + ExportName + "\\""; //Flv格式     

            //转mp4格式 flv->mp4成功  不能用video播放，可以用播放器使用
            string aa3 = $"-i {vFileName} -y -b 1024k -acodec copy -f mp4 {ExportName}";

            System.Diagnostics.Process p = new System.Diagnostics.Process(); //利用Pocess启动应用程序
            p.StartInfo.FileName = ffmpegtool;   //地址
            p.StartInfo.Arguments = Command;//命名行
           
            p.StartInfo.UseShellExecute = false;
            p.StartInfo.RedirectStandardInput = true;
            p.StartInfo.RedirectStandardOutput = true;
            p.StartInfo.RedirectStandardError = true;
            p.StartInfo.CreateNoWindow = false;
            p.Start();
            p.BeginErrorReadLine();
            p.WaitForExit();
            p.Close();
            p.Dispose();
            return true;
        }
        #endregion

③传递参数，这是根据你的上面的方法来进行传值，注意路径

   protected async void Button1_Click(object sender, EventArgs e)
        {
           
            Stopwatch sw = new Stopwatch();
            await Task.Run(() =>
          {            
              HttpPostedFile hf = Request.Files["FileUpload1"];
              string path = Path.Combine(Server.MapPath("~/Upload/"), hf.FileName);
              hf.SaveAs(path);
              if (ConvertFlv("~/Upload/" + hf.FileName, "~/Upload2/Test.flv"))
              {
                  Response.Write("成功:" + sw.ElapsedMilliseconds / 1000.0 + " s");
              }
              else
              {
                  Response.Write("失败");
              }

          });
        }

这样就可以了。

//参数说明  FFMPEG
    /*
        * -i filename(input) 源文件目录
        * -y 输出新文件，是否强制覆盖已有文件
        * -c 指定编码器 
        * -fs limit_size(outinput) 设置文件大小的限制，以字节表示的。没有进一步的字节块被写入后，超过极限。输出文件的大小略大于所请求的文件大小。
        * -s 视频比例  4:3 320x240/640x480/800x600  16:9  1280x720 ，默认值 \'wxh\'，和原视频大小相同
        * -vframes number(output) 将视频帧的数量设置为输出。别名：-frames:v
        * -dframes number (output) 将数据帧的数量设置为输出.别名：-frames:d
        * -frames[:stream_specifier] framecount (output,per-stream) 停止写入流之后帧数帧。
        * -bsf[:stream_specifier] bitstream_filters (output,per-stream)  指定输出文件流格式，
    例如输出h264编码的MP4文件：ffmpeg -i h264.mp4 -c:v copy -bsf:v h264_mp4toannexb -an out.h264
        * -r 29.97 桢速率（可以改，确认非标准桢率会导致音画不同步，所以只能设定为15或者29.97） 
        * 
        */

 

 

 转MP4格式  

  找了好多文章都没有说怎么解决这个问题，就在服务器上解决吧。

 上传了视频可设置审核，然后在服务器上安装一个转换视频的软件，手动进行转换。