ckplayer.com
首页 | 下载 | 帮助手册 | 应用示例 | 论坛
按列表显示框进行顺序自动播放
>>
相关代码及说明
原理:主要用css的设置把列表框给显示出来,再通过JS把列表框进行填充,当播放完成时,自动调用playstop()的函数调用获取下一部的视频ID,可以自动进行播放。
<div id="a1"></div>
<script src="../flash/ckplayer/ckplayer.js"></script>
<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端视频地址,添加方法就像下面一样
        videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-3.flv');
        videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-1.flv');
        videoarr.push('http://movie.ks.js.cn/flv/2011/11/8-1.flv');
        videoarr.push('http://movie.ks.js.cn/flv/2014/04/24-2.flv');
        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('../flash/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, video);
    }
    playvideo(0);
</script>
 <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;
                 background: #262626;
                  }
      #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;
                       }
      #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>