zoukankan      html  css  js  c++  java
  • ckplayer插件播放视频

    官网:超酷网页视频

    本篇介绍:插件播放视频,  添加插件(额外的功能),  视频格式之间的转换

    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格式  

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

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

  • 相关阅读:
    storm原理写得比较好的文章
    maven设置jdk版本
    项目中记录log4j记录日志
    eclipse jadeclipse配置
    Maven使用说明
    crond不执行原因分析
    空调遥控器图标含义
    window7开放端sqlserver端口
    servlet仿struts参数注入
    cocos 2dx-js3.5整合anySDK
  • 原文地址:https://www.cnblogs.com/Sea1ee/p/7400627.html
Copyright © 2011-2022 走看看