主题 : video-js纵向伸缩列表播放
级别: 举人
UID: 65802
积分:149 加为好友
威望: 8 精华: 0
主题:9 回复:107
注册时间:2014-08-15
在线时长:0
1#   发表于:2018-04-13 15:28:03  IP:61.103.*.*

<!DOCTYPE HTML>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>${title} - ${site.name} - Powered by JEECMS</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="${content.tagStr!}" http-equiv="keywords" />
<meta content="${content.description!}" http-equiv="description" />
<script src="${resSys}/html5.js" type="text/javascript"></script>
<link href="/${res}/css/index.css" rel="stylesheet" type="text/css"/>
<link href="/${res}/css/html5.css" rel="stylesheet" type="text/css"/>
<script src="${resSys}/jquery.js" type="text/javascript"></script>
<script src="${resSys}/front.js" type="text/javascript"></script>
<script src="/${res}/js/common.js" type="text/javascript"></script>
<script src="${base}/r/cms/www/school/ckplayer/ckplayer.js" type="text/javascript"></script>
<script src="${base}/r/cms/www/school/ckplayer/js/offlights.js" type="text/javascript"></script>
<link href="${base}/thirdparty/video-js/video-js.css" rel="stylesheet" type="text/css">  
<script src="${base}/thirdparty/video-js/video.js"></script>  
<script type="text/javascript">
$(function() {
Cms.attachment("${base}","${content.id}","${content.attachments?size}","attach");
Cms.viewCount("${base}","${content.id}");
Cms.siteFlow("${base}", location.href, document.referrer);
});
</script>
<style type="text/css">
  /* CSS Document */
        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%;
margin:auto;
width:998px;
text-align:center;
        }

        * + html .clearfix {
            height: 1%;
width:998px;
text-align:center;
margin:auto;
        }

        .clearfix {
width:998px;
text-align:center;
margin:auto;
            display: inline-block;
        }
        /* Hide from IE Mac */
        .clearfix {
width:998px;
text-align:center;
            display: block;
margin:auto;
        }

        #playerlist a {
            text-decoration: none;
            outline: none;
            color: #FFF;
        }
  .tvNews3{
  margin-left:80px;
 
  
  }
        .a1 {
            width: 640px;
            height: 480px;
    float:left;

        }

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

            #playerlist li {
                list-style: none;
                height: 65px;
                line-height: 60px;
                padding-bottom: 2px;
                border-bottom: 1px solid #333;
                overflow: hidden;
                padding-left: 2px;
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: 65px;
                    margin: 0 20px 0 0;
                }
.mimg {
        text-align:center;
float:left;
background-color: #F5F5F5;
border: 1px solid #878787;
height: 65px;
width: 90px;
}
.mright {
        float: left;
padding-left: 5px;
        padding-top: 2px;
width: 125px;
line-height: 12px;
font-size: 9px;
        text-align:left;
        
}
.mright a {
text-decoration: none;
color: #06F;
}

    </style>

</head>
<body>

<div class="container">

    <div class="banner_AD2">
<script src="${base}/adspace.jspx?id=1" type="text/javascript"></script>
</div>
<!-- 
<div class="me">
<div class="topp">
    [#include "../include/navi.html"/]
</div>  
</div> 
 -->
  <div class="w1000">
    <div class="website">
        当前位置:<a href="${base}/">首页</a> > [#list channel.nodeList as n]<a target="_blank" href="${n.url}">${n.name}</a>[#if n_has_next] > [/#if][/#list] > 正文
    </div>
    <div class="clear"></div>

  <div class="newsTex"> 
         <h1 id="video_newtitle">${content.title}</h1>
        <div class="msgbar">发布时间: ${content.releaseDate} &nbsp; 作者:${content.author!'本站编辑'} &nbsp; 来源: ${content.origin!'本站原创'} &nbsp; 浏览次数:<span id="views"></span> 
        [#if user??] 
        <script type="text/javascript"> 
        $(function() { 
        Cms.collectexist("${base}","${content.id}","cancelSpan","comfirmSpan"); 
        }); 

        </script> 
        [/#if] 
        </div> 
        
    </div> 
  <div class="tvNews3">
      [#if content.mediaPath?? && content.mediaType??] 
         



<!--/*ckplayer 超酷视频播放器_实现多集连播 */ -->


<script type="text/javascript" >
              var cur_content_mediaPath="${content.id}";
              var cur_id=0;
              var videoarr = new Array();//新建一个数组来存flash端视频地址,添加方法就像下面一样
              var videotitle =new Array();
      var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址,注意,因为本演示只有一种mp4文件,所以html5下所有用到的视频地址都是相同的,请见谅,另外,该数组是一个二维数组
          
</script>
<div class="clearfix">
        <div class="a1" id="a1"></div>
        <div id="a2" onclick="Close();" onmouseover="Close();" title="收起列表">&gt;&gt;</div>
        <div id="a3" onclick="Open();" onmouseover="Open();"  style="display:none" title="展开列表">&lt;&lt;</div>
        <ul id="playerlist">

         [@cms_content_list count='10' orderBy='4' channelId=channel.id titLen='14' append='...' descLen='45' dateFormat='yyyy-MM-dd' channelOption='1']  
                [#list tag_list as a]

 <li id="vli_${a_index}">            
 <script type="text/javascript" >
                       videoarr.push("${a.mediaPath}");
                       videotitle['${a_index}']=('${a.title}');
               html5arr.push("${a.mediaPath}->video/mp4");  
if(cur_content_mediaPath=='${a.id}'){cur_id='${a_index}';}   
   </script>
                           <div class="mimg"><a href="javascript:jsnull(0);" onclick="playvideo(${a_index});"><img src="${a.titleImg!site.defImg}" width="90" height="75"></a></div>
   <div class="mright"><a href="javascript:jsnull(0);" onclick="playvideo(${a_index})"><font-size="13px" color="white">${a.title}</font></a>
                           <a href="javascript:jsnull(0);" onclick="playvideo(${a_index})" style="color:#424242">[@text_cut s=a.desc len=descLen /]</a>
  </div>    

              </li>  

          [/#list]
       [/@cms_content_list]         
</ul>
</div>

<script type="text/javascript" src="/r/cms/www/school/ckplayer/ckplayer.js"></script>
    <script type="text/javascript">
//for(i=0;i<videoarr.length;i++){//这里是用来保存当前的视频的ID号 
//if(videoarr[i]==${content.mediaPath}){
                               // cur_id=i;

//}
//}
        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 = '850px';
            CKobject.getObjectById('ckplayer_a1').width = 850;
        }
        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 = '640px';
            CKobject.getObjectById('ckplayer_a1').width = 640;
        }
        var nowD = 0;//目前播放的视频的编号(在数组里的编号)
        var frontTime = false;//前置广告倒计时是否在运行中
        var frontHtime = false;//后置广告是否在进行中

function playvideo(n){
nowD=n;
 var flashvars={
  f:videoarr[n],
                        c:0,
                        p:1,
                        e:0,
                        h:4,
                        st:1,
                        fc:1, 
  loaded:'loadedHandler',
  my_url:encodeURIComponent(window.location.href),
  };
                 video=[videoarr[n]+'->video/mp4'];
                  document.title=[videotitle[n]];
                  document.getElementById("video_newtitle").innerHTML=[videotitle[n]];
// CKobject.embed('/r/cms/www/school/ckplayer/ckplayer.swf','a1','ckplayer_a1','640','480',false,flashvars,html5arr[n]);
         var support=['all'];
         CKobject.embedHTML5('a1','ckplayer_a1',640,480,[html5arr[n]],flashvars,support);
 
 
 
//强制前置广告显示
// if(frontHtime){//后置广告正在进行中
// if(nowD>0){
// nowD++
/// }
// else{
// nowD=videoarr.length-1;
// }
// CKobject._K_('djs').innerHTML='0';//让其结束播放广告并且计算下一部要播放的编号
// return;
//  }
//if(frontTime){//如果前置广告还在运行中,只需要改变倒计时即可
// CKobject._K_('djs').innerHTML='15';
// }
// else{
// CKobject._K_('yytf').style.display='block';
// CKobject._K_('yytf').className='yytf_1';
// CKobject._K_('daojs').style.display='block';
// CKobject._K_('djs').innerHTML=15;
// settime();
// }
for(i=0;i<videoarr.length;i++){//这里是用来改变右边列表背景色
if(i!=nowD){
CKobject._K_('vli_'+i).style.backgroundColor='#262626';
}
else{
CKobject._K_('vli_'+i).style.backgroundColor='#666666';
}
}
// }


       function setTimeend() {//获取下一部视频的播放ID
            nowD++;
            if (nowD >= videoarr.length ) {
                nowD = 0;
            }
            playvideo(nowD);
        }

// function settime(){//前置广告倒计时
// var nowT=parseInt(CKobject._K_('djs').innerHTML);
// if(nowT>0){
// frontTime=true;
// CKobject._K_('djs').innerHTML=nowT-1;
// setTimeout('settime()',1000)
// }
// else{
/// frontTime=false;
// CKobject._K_('yytf').style.display='none';
// CKobject._K_('daojs').style.display='none';
// CKobject.getObjectById('ckplayer_a1').videoPlay();
// }
// }
// function setTimeend(){//后置广告倒计时
// var nowT=parseInt(CKobject._K_('djs').innerHTML);
// if(nowT>0){
// frontHtime=true;
// CKobject._K_('djs').innerHTML=nowT-1;
// setTimeout('setTimeend()',1000)
// }
// else{
// frontHtime=false;
// nowD++;
// if(nowD>=videoarr.length-1){
// nowD=0;
// }
// playvideo(nowD);
// }
}


      //for(i=0;i<videoarr.length;i++){//这里是用来保存当前的视频的ID号 
//if(cur_content_mediaPath="videoarr[i]"){cur_id=i;alert(cur_id);}
//}
        //var cur_id=2;
        //alert(cur_id);
playvideo(cur_id);
</script>   
[/#if]</div>
<div class="clear"></div>
   <div class="content  mt10">${txt!}</div> 
     <div class="pagebar">[#include "../style_page/content.html"/]</div> 
            [#if channel.allowShare]
             <!-- bshare start -->
              [#include "inc_share.html"/]
             <!-- bshare分享 end -->
            [/#if]

 </div>

    <div class="clear"></div>
    <div class="w700 mt10">

     <div class="rim06">
           <!--网友评论_Begin-->
           [#if channel.commentControl!=2]
            [#include "../content/inc_comment_input.html"/]
            [#include "../content/inc_comment_list.html"/]
            [/#if]
            <!--网友评论_End-->
       </div>
        
        <div class="clear"></div>
        <div class="clear"></div>
    </div>
    <div class="w270_tv">
     <div class="rim06 mt10">
         <div class="LanMu01-2">
                <div class="LanMu01-1"></div>
                <span>影片简介</span>
                <div class="LanMu01-3"></div>
            </div>
         <div class="tvxinxi">
                <ul>
                 <li><h1>${content.title!}</h1></li>
                 <li>制作单位:<span>${content.attr.Starring!}</span></li>
                 <li>撰稿:<span>${content.attr.Director!}</span></li>
                 <li>类型:<span>${content.attr.VideoType!}</span></li>
                 <li>简介:<span>${content.desc!}</span></li>
                </ul>
            </div>
        </div>
    </div>
  </div> 
    [#include "../include/friend_link.html"/]
    [#include "../include/footer.html"/]
    
 </div>
</body>
</html>
级别: 版主
UID: 121385
积分:34048 加为好友
威望: 0 精华: 0
主题:0 回复:32073
注册时间:2018-03-20
在线时长:0
2#   发表于:2018-04-13 15:29:51  IP:117.115.*.*
第1楼
世间没有一种具有真正价值的东西,可以不经过艰苦辛勤劳动而能够得到的。
1 共1页