JS进阶篇--ckplayer.js视频播放插件

2019年8月26日 265次阅读 来源: 风雨后见彩虹

网页中常见的功用就是播放视频，下面引见的这个ckplayer.js既能够在pc端播放，也能够在手机网页上播放。

可挪用flash也能够挪用html5播放器：

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.mp4',
        c:0,
        loaded:'loadedHandler'
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
    CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video);
</script>

CKobject.embed(

‘flash播放器文件途径’,

‘容器ID’,

‘播放器的ID’,

‘宽度，能够是百分比’,

‘高度，能够是百分比’,

优先挪用设置，false=优先挪用flash播放器，true=优先挪用HTML5播放器

flash播放器的初始化参数，以及HTML5初始化参数，比方默许播放/停息等设置，细致的能够参考【flashvars里各参数的申明】这一版块

HTML5视频播放地点，数组情势，细致的可参考HTML5视频挪用的申明

)

只挪用flash播放器：

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        f:'http://movie.ks.js.cn/flv/other/1_0.flv',
        c:0,
        b:1
    };
    var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
    CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params); 
</script>

CKobject.embedSWF(‘flash播放器途径’,

‘安排播放器的容器ID’,

‘播放器的ID’,

‘宽度，支撑百分比’,

‘高度，支撑百分比’,

flashvars对象，初始化播放器参数,

相干的设置，如：背景色，是不是许可全屏，是不是许可交互，播放器是不是通明

);

只挪用HTML5播放器：

<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
    var flashvars={
        p:1,
        e:1
    };
    var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
    var support=['all'];
    CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>

CKobject.embedHTML5(‘安排播放器的容器的ID’,

‘播放器ID’,

‘宽高，支撑百分比’,

‘高度，支撑百分比’,

视频地点，数组，由于差别的平台支撑的视频花样差别，所以须要只管多的视频花样来兼容,

初始化设置参数，比方默许是不是播放,

在哪些平台上运用，all是指悉数平台都挪用

);

个中flashvars中的参数以下：

/**
注重，flashvars中的参数：
    v：ckplayer_volume，视频默许音量 0-100 之间，默许为 85。
    p：ckplayer_play，是不是自动播放，能够为 1 或 0，默许为 1，参数不为 1 时播放器加载完成后均为停息状况。
    f：ckplayer_flv，视频地点，默许为空，能够是零丁视频地点、url 地点列表文件、xml 地点列表文件、Flash 地点文件这四种状况。（注重对应修正 s 参数的值，即 ckplayer_style）
    i：ckplayer_loadimg，视频播放器初始图片地点，即封面图片，默许为空。
    d：ckplayer_pauseflash，停息时播放的广告，只支撑 Flash 和图片，默许为空。
    u：ckplayer_pauseurl，停息时播放广告图片的链接地点，默许为空。
    l：ckplayer_loadadv，视频最先前播放的广告，能够是 图片/Flash/视频花样，默许为空。
    r：ckplayer_loadurl，视频最先前广告的链接地点，重要针对视频广告，假如是 Flash 广告能够不填写，默许为空。
    t：ckplayer_loadtime，视频最先前广告播放的秒数，只针对 Flash 或图片有用，默许为 0。
    e：ckplayer_endstatus，视频完毕后的行动，0 住手播放并发送js，1 是不发送 js 且从新轮回播放，2 住手播放，默许为2。当为 0 时须要自定义函数：
        function playerstop(){
            alert("播放完成");
        }
    a：ckplayer_pat，只要在运用 Flash 加密地点通报时有用，须要 f 和 s 参数合营，以及你自定义的 geturl.swf 文件合营，f：ckplayer_flv 参数也能够为 getflv.php?id=[$pat] 如许的花样，相当于 Flash 加密地点通报，个中的 pat 是有用的,能够经由过程这里通报参数后获得视频播放地点给播放器。
    s：ckplayer_style，f 参数的通报体式格局，0 是一般视频地点，1 是视频地点列表文件，2 是 xml 地点列表文件，3 是 Flash 加密地点剖析，默许为 0 一般视频地点文件播放。
    x：ckplayer_xml，皮肤设置文件，假如为空的话将运用 js 文件设置，默许为官方皮肤 ckplayer.xml，要修正为其他皮肤只须要下载后改这个文件名就能够了，比方网易皮肤 ckplayer_163.xml。
    c：ckplayer_default，读取文本设置，此参数具有异常壮大的功用，非 0 值时挪用当地 ckplayer.txt 设置文件（比方外站援用视频只需一个参数即可）说来话长，请到网站相识概况。
    b：ckplayer_bgcolor，该参数以顺应站外挪用时有些论坛自动设置通明度的题目。
    h：ckplayer_http，默许为0，定义 http 视频流采纳按症结帧拖动照样按症结时候点拖动，0是按症结帧，1是按症结时候点。
    m：ckplayer_load，默许为0，为1时不自动加载视频，挑选是不是采纳点击播放按钮时再加载视频，这个参数的功用是在同页面加载多个视频时，有些视频能够先不加载，省带宽。
    g：ckplayer_start，默许为0，开首跳过时候，这两个参数能够定义按指定时候举行播放的功用和提前完毕的功用，该功用的用途一是能够纪录用户已播放到的时候下次翻开该视频时直接从指定时候举行播放,二是能够做跳过片头和片尾的功用。
    j：ckplayer_ending，同上，默许为0，提前完毕时候。
    o：附加参数，非 CKplayer 官方参数，可选，默许值为 0，当值为 1 时，可加载站外视频 Flash 地点，如优酷分享中的 Flash 地点等，相当于运用 <embed> 标签加载站外 Flash 视频。
**/

下面贴一个实例代码：

html代码：

<div id="video_c"></div>

css代码：

 #video_c{ width:840px; height:353px;margin:0 auto;}

js代码：

<script type="text/javascript" src="ckplayer/ckplayer.js"></script>
<script type="text/javascript">

var flashvars={
    f:'ckplayer/video/1_0.flv',
    p:0
    //i：'http://www.ckplayer.com/static/images/letitgo.jpg' //视频播放器初始图片地点，即封面图片，默许为空。
    };
var video=['ckplayer/video/1_0.mp4->video/mp4'];
CKobject.embed('ckplayer/ckplayer.swf','video_c','ckplayer_a1','100%','100%',false,flashvars,video);

</script>

结果截图以下以下：

《JS进阶篇--ckplayer.js视频播放插件》

须要demo猛点该笔墨，百度云盘下载

注：假如是flash播放优先，假如flashvars的属性p的值为0时，示意为停息状况，点击播放按钮时，屏幕中心的播放按钮不会消逝，须要放到环境内里检察结果，就不会涌现该状况。

假如有需求去掉ckplayer播放器右侧的开关灯分享插件，会有特地的文章整理出来关于去掉该插件的，该百度网盘中已经是去掉播放器右侧的开关灯分享插件的。

参考地点：

ckplayer官网：http://www.ckplayer.com/
参数引见链接：http://www.fufuok.com/demo/ck…

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003489040
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞