按列表显示框进行顺序自动播放

原理:主要用css的设置把列表框给显示出来,再通过JS把列表框进行填充,当播放完成时,自动调用playstop()的函数调用获取下一部的视频ID,可以自动进行播放。

  1. <div id="a1"></div>
  2. <script src="../flash/ckplayer/ckplayer.js"></script>
  3. <script type="text/javascript">
  4.        function playerstop() {
  5.             setTimeend();
  6.         }
  7.        function setTimeend() {//获取下一部视频的播放ID
  8.             nowD++;
  9.             if (nowD >= videoarr.length ) {
  10.                 nowD = 0;
  11.             }
  12.             playvideo(nowD);
  13.         }
  14.         function Close() {//关闭播放列表
  15.             CKobject._K_('a2').style.display = 'none';
  16.             CKobject._K_('playerlist').style.display = 'none';
  17.             CKobject._K_('a3').style.display = 'block';
  18.             CKobject._K_('a1').style.width = '970px';
  19.             CKobject.getObjectById('ckplayer_a1').width = 970;
  20.         }
  21.         function Open() {//打开播放列表
  22.             CKobject._K_('a2').style.display = 'block';
  23.             CKobject._K_('playerlist').style.display = 'block';
  24.             CKobject._K_('a3').style.display = 'none';
  25.             CKobject._K_('a1').style.width = '770px';
  26.             CKobject.getObjectById('ckplayer_a1').width = 770;
  27.         }
  28.         var nowD = 0;//目前播放的视频的编号(在数组里的编号)
  29.         var frontTime = false;//前置广告倒计时是否在运行中
  30.         var frontHtime = false;//后置广告是否在进行中
  31.         var videoarr = new Array();//新建一个数组来存flash端视频地址,添加方法就像下面一样
  32.         videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-3.flv');
  33.         videoarr.push('http://movie.ks.js.cn/flv/2012/02/6-1.flv');
  34.         videoarr.push('http://movie.ks.js.cn/flv/2011/11/8-1.flv');
  35.         videoarr.push('http://movie.ks.js.cn/flv/2014/04/24-2.flv');
  36.         var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址,注意,因为本演示只有一种mp4文件,所以html5下所有用到的视频地址都是相同的,请见谅,另外,该数组是一个二维数组
  37.         html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
  38.         html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
  39.         html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
  40.         html5arr.push(['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']);
  41.         function playvideo(n) {
  42.             nowD = n;
  43.         var flashvars = {
  44.         f: videoarr[n],
  45.         c: 0,
  46.         p: 1,
  47.         e: 0,
  48.         my_url: encodeURIComponent(window.location.href)
  49.      };
  50.      for (i = 0; i < videoarr.length; i++) {//这里是用来改变右边列表背景色
  51.      if (i != nowD) {
  52.        CKobject._K_('vli_' + i).style.backgroundColor = '#262626';
  53.      }
  54.      else {
  55.        CKobject._K_('vli_' + i).style.backgroundColor = '#DAF2FF';
  56.      }
  57.       var video = ['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
  58.       CKobject.embed('../flash/ckplayer/ckplayer.swf', 'a1', 'ckplayer_a1', '100%', '100%', false, flashvars, video);
  59.     }
  60.     playvideo(0);
  61. </script>
  62.  <style type="text/css">
  63.           /* CSS Document */
  64.     body, h1, h2, h3, h4, h5, h6, hr, p,
  65.     blockquote, /* structural elements 结构元素 */
  66.     dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  67.     pre, /* text formatting elements 文本格式元素 */
  68.     form, fieldset, legend, button, /* form elements 表单元素 */
  69.     th, td, /* table elements 表格元素 */
  70.     img {
  71.              border: medium none;
  72.              margin: 0;
  73.              padding: 0;
  74.         }
  75.      li, ol {
  76.              list-style: none;
  77.              vertical-align: bottom;
  78.              }
  79.      em {
  80.              font-style: normal;
  81.          }
  82.      img {
  83.            vertical-align: middle;
  84.          }
  85.             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 {
  86.                     cursor: pointer;
  87.                 }
  88.      .clearfix:after {
  89.                     content: ".";
  90.                     display: block;
  91.                     height: 0;
  92.                     clear: both;
  93.                     visibility: hidden;
  94.                 }
  95.       *html .clearfix {
  96.                     height: 1%;
  97.                 }
  98.       * + html .clearfix {
  99.                     height: 1%;
  100.                 }
  101.       .clearfix {
  102.                     display: inline-block;
  103.                 }
  104.       /* Hide from IE Mac */
  105.       .clearfix {
  106.                     display: block;
  107.                 }
  108.       #playerlist a {
  109.                     text-decoration: none;
  110.                     outline: none;
  111.                     color: #FFF;
  112.                 }
  113.       #a1 {
  114.            width: 770px;
  115.            height: 480px;
  116.            float: left;
  117.                 }
  118.       #a2, #a3 {
  119.                  width: 10px;
  120.                  height: 480px;
  121.                  float: left;
  122.                  background: #262626;
  123.                   }
  124.       #playerlist {
  125.                     width: 190px;
  126.                     height: 480px;
  127.                     overflow: auto;
  128.                     float: left;
  129.                     background: #262626;
  130.                     font-size: 12px;
  131.                        }
  132.       #playerlist li {
  133.                         list-style: none;
  134.                         height: 40px;
  135.                         line-height: 40px;
  136.                         padding-bottom: 2px;
  137.                         border-bottom: 1px solid #333;
  138.                         overflow: hidden;
  139.                         padding-left: 5px;
  140.                        }
  141.       #playerlist li:last-child {
  142.                             border-bottom: none;
  143.                         }
  144.       #playerlist li.crent {
  145.                             background: #1C1C1C;
  146.                         }
  147.       #playerlist li.crent a {
  148.                               color: #FF7900;
  149.                        }
  150.       #playerlist li a {
  151.                          display: block;
  152.                          color: #fff;
  153.                         }
  154.       #playerlist li img {
  155.           vertical-align: middle;
  156.           height: 40px;
  157.           margin: 0 20px 0 0;
  158.            }
  159. </style>

您可以选择一种方式赞助本站

目前评论:2   其中:访客  2   博主  0

  1. 很有用的文章,收藏了

    2016年06月30日 08:56  沙发
  2. 留个脚印,欢迎来themebetter问答讨论交流各种网站技术问题哦!

    2016年06月30日 00:50  板凳
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: