Ckplayer播放器播放视频

最新推荐文章于 2024-06-14 11:29:50 发布

Thor_Stefan

最新推荐文章于 2024-06-14 11:29:50 发布

阅读量8.8k

点赞数

分类专栏： SSH 文章标签： Ckplayer 视频插件

本文链接：https://blog.csdn.net/Thor_Stefan/article/details/80514428

版权

SSH 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CKplayer作为是非常好用的视频播放插件，但是目前我只能让他播放已经有的网络视频资源：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib uri="/struts-tags"  prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>按列表显示框进行顺序自动播放-ckplayer应用示例</title>
    <meta name="keywords" content="flv播放器,f4v,mp4,hlv,rtmp播放器,网页视频播放器,ckplayer官网,视频流,播放器" />
    <meta name="description" content="ckplayer(超酷网页视频播放器),支持http协议下的flv,f4v,mp4,支持rtmp视频流和rtmp视频回放，支持m3u8格式，是你做视频直播，视频点播的理想播放器 " />
    <meta name="author" content="ckplayer,超酷网页视频播放器" />
    <meta name="copyright" content="ckplayer,超酷网页视频播放器" />
    <script type="text/javascript" src="/static/js/jq1.9.1.js"></script>
    <script type="text/javascript" src="/static/js/help.js"></script>
    <link href="/static/css/example.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        /* CSS Document */
        body, h1, h2, h3, h4, h5, h6, hr, p,
        blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, /* form elements 表单元素 */
        th, td, /* table elements 表格元素 */
        img {
            border: medium none;
            margin: 0;
            padding: 0;
        }

        li, ol {
            list-style: none;
            vertical-align: bottom;
        }

        em {
            font-style: normal;
        }

        img {
            vertical-align: middle;
        }

        a, input, textarea, select, option, button, .logo, #icon_num li, #icon_num_top li, .blk_29 .LeftBotton, .blk_29 .RightBotton, #cal #cm .cell, .work_lcontent img, .work_detail img, .brow img {
            cursor: pointer;
        }


        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        *html .clearfix {
            height: 1%;
        }

        * + html .clearfix {
            height: 1%;
        }

        .clearfix {
            display: inline-block;
        }
        /* Hide from IE Mac */
        .clearfix {
            display: block;
        }

        #playerlist a {
            text-decoration: none;
            outline: none;
            color: #FFF;
        }

        #a1 {
            width: 770px;
            height: 480px;
            float: left;
        }
        #a2, #a3 {
            width: 10px;
            height: 480px;
            float: left;
            color: #FFF;
            background-color: #666;
            line-height: 480px;
            cursor:pointer;
        }
        #playerlist {
            width: 190px;
            height: 480px;
            overflow: auto;
            float: left;
            background: #262626;
            font-size: 12px;
        }

        #playerlist li {
            list-style: none;
            height: 40px;
            line-height: 40px;
            padding-bottom: 2px;
            border-bottom: 1px solid #333;
            overflow: hidden;
            padding-left: 5px;
            cursor:pointer;
        }

        #playerlist li:last-child {
            border-bottom: none;
        }

        #playerlist li.crent {
            background: #1C1C1C;
        }

        #playerlist li.crent a {
            color: #FF7900;
        }

        #playerlist li a {
            display: block;
            color: #fff;
        }

        #playerlist li img {
            vertical-align: middle;
            height: 40px;
            margin: 0 20px 0 0;
        }
    </style>

</head>
<body>
<script type="text/javascript" src="/static/js/laycode/laycode2.js"></script>
<script src="ckplayer_6.6/ckplayer/ckplayer.js"></script>

<div class="clearfix">
    <div id="a1"></div>
    <div id="a2" οnclick="Close();" title="收起列表">>></div>
    <div id="a3" οnclick="Open();" style="display:none" title="展开列表"><<</div>
    <ul id="playerlist" style="text-align: left;width: 250px">
     <s:bean id="sort" name="com.sdibt.lcc.comparator.SortComparatorCourse"></s:bean>    
       <s:sort source="#allCourses" comparator="sort">              
       <s:iterator status="st">      
        <li id="vli_<s:property value='#st.index'/>"  οnclick="playvideo(<s:property value='#st.index'/>)">
        <i class="glyphicon glyphicon-film" style="font-size:16px;color:orange;margin:10px"></i><font size="3" color="skyblue"> <s:property value="coureseName"/></font><i class="glyphicon glyphicon-bookmark" style="font-size:10px;color:orange;text-align: right;margin-left:30px"></i>
        
        </li>        
       </s:iterator>
       </s:sort>
        

    </ul>
</div>

<script type="text/javascript">
    function playerstop() {
        setTimeend();
    }
    function setTimeend() {//获取下一部视频的播放ID
        nowD++;
        if (nowD >= videoarr.length ) {
            nowD = 0;
        }
        playvideo(nowD);
    }
    function Close() {//关闭播放列表
        CKobject._K_('a2').style.display = 'none';
        CKobject._K_('playerlist').style.display = 'none';
        CKobject._K_('a3').style.display = 'block';
        CKobject._K_('a1').style.width = '970px';
        CKobject.getObjectById('ckplayer_a1').width = 970;
    }
    function Open() {//打开播放列表
        CKobject._K_('a2').style.display = 'block';
        CKobject._K_('playerlist').style.display = 'block';
        CKobject._K_('a3').style.display = 'none';
        CKobject._K_('a1').style.width = '770px';
        CKobject.getObjectById('ckplayer_a1').width = 770;
    }
    var nowD = 0;//目前播放的视频的编号(在数组里的编号)
    var frontTime = false;//前置广告倒计时是否在运行中
    var frontHtime = false;//后置广告是否在进行中
    var videoarr = new Array();//新建一个数组来存flash端视频地址，添加方法就像下面一样
    <%
    String coursestring=(String)session.getAttribute("courselocation");    
    String[]  coursesarray=coursestring.split(";");
    System.out.print(coursesarray.length);
    for(int i=0;i<coursesarray.length;i++){   	
    	  %>videoarr.push(<%=coursesarray[i]%>);    	
   <% }%>

    var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址，注意，因为本演示只有一种mp4文件，所以html5下所有用到的视频地址都是相同的，请见谅，另外，该数组是一个二维数组
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
    function playvideo(n) {
        nowD = n;
        var flashvars = {
            f: videoarr[n],
            c: 0,
            p: 1,
            e: 0,
            my_url: encodeURIComponent(window.location.href)
        };
        for (i = 0; i < videoarr.length; i++) {//这里是用来改变右边列表背景色
            if (i != nowD) {
                CKobject._K_('vli_' + i).style.backgroundColor = '#262626';
            }
            else {
                CKobject._K_('vli_' + i).style.backgroundColor = '#DAF2FF';
            }
        }

        var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
        CKobject.embed('ckplayer_6.6/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, html5arr[n]);
    }
    playvideo(0);
</script>
</body>
</html>

也可以参考：在线调试

还有基于ckplayer6的实例：点击打开链接

源码：我等会看能不能上传

写完之后界面：