主题 : 整合ckplayer视频播放器,实现按列表显示框进行(横 向)顺序自动播放,通过测试!(风格1)
级别: 举人
UID: 65802
积分:149 加为好友
威望: 8 精华: 0
主题:9 回复:107
注册时间:2014-08-15
在线时长:0
1#   发表于:2018-04-13 15:21:53  IP:61.103.*.*

<!DOCTYPE HTML>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>${content.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>

<script src="/${res}/js/juheweb.js" type="text/javascript"></script>
<script type="text/javascript" src="/r/cms/www/school/ckplayer/js/laycode2.js"></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>    videojs.options.flash.swf = "${base}/thirdparty/video-js/video-js.swf";  </script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="${base}/player/sewise.player.min.js"></script>
<script src="${base}/player/js/jquery-1.11.1.min.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">
.vlist {margin:0 auto;

}

#a1 {
height: 400px;
width: 640px;
}
.mlist {margin:0 auto; position:relative; overflow:hidden; 
width: 640px;
height: 100px;
background-color: #000000;
overflow-style:marquee-block;
overflow-style:marquee-line;

}

.mlist u{
width: 640px;
height: 95px;
background-color: #262626;
 
}
.mlist li {
        
        float: left;
padding-top: 6px;
        padding-left:0px;
        padding-right: 7px;
height: 95px;
width: 93px;
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #262626;
background-color: #666666;
list-style-type: none;
}
.mlist li:hover {float: left;
padding-top: 6px;
        padding-left: 0px;
        padding-right: 7px;
        height: 95px;
width: 93px;
border-bottom-width: 1px;
border-bottom-style: none;
border-bottom-color: #666;
background-color: #666666;
list-style-type: none;
}
.mimg {margin:0 auto;
        text-align:center;
float:left;
background-color: #F5F5F5;
border: 1px solid #878787;
height: 65px;
width: 93px;
}
.mright {
        float: left;
padding-left: 5px;
width: 93px;
        height: 95px;
line-height: 20px;
font-size: 12px;
}
.mright a {
text-decoration: none;
color: #06F;
}
.leftz {margin:0 auto;
height: 400px;
width: 640px;
}
.left {margin:0 auto;
width: 640px;
position: absolute;
z-index: 10;
height: 480px;
}
.boxbox{ width:640px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
.picbox{ width:640px; height:125px;margin-left:0px; overflow:hidden; position:relative;}
.piclist{ height:125px;position:absolute; left:0px; top:0px}
.piclist li{float:left;}
.swaplist{ position:absolute; left:-1800px; top:0px}
.og_prev,.og_next{display:block; width:45px; height:100px; overflow:hidden;text-indent:0px; position:absolute;cursor:pointer; margin:0 0 0 0; background: url(/r/cms/www/school/img/tv/silder_btn.gif) no-repeat; position:absolute; top:0px; z-index:999; cursor:pointer;filter:alpha(opacity=70); opacity:20;}
.og_prev{background-position:-60px 10px; left:4px; }
.og_next{background-position:0 10px; right:4px; }
.yytf_1 {
position: absolute;
z-index: 100;
height: 400px;
width: 640px;
background-color: #000;
}
.yytf_2 {
position: absolute;
z-index: 100;
height: 280px;
width: 336px;
margin-top: 60px;
margin-left: 132px;
}
#daojs {
text-align: right;
background-color: #000;
padding-right: 20px;
color: #FFF;
padding-top: 20px;
padding-bottom: 20px;
}
.baiduyytf {
height: 280px;
width: 336px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body>
<div class="container">
    <div class="banner_AD2">
<script src="${base}/adspace.jspx?id=1" type="text/javascript"></script>
</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"></h1>
  
        <div class="msgbar">发布时间: <span id="releaseDate">${content.releaseDate}</span>   作者: <span id="author">${content.author!'本站编辑'}</span>   来源:<span id="origin">${content.origin!'本站原创'}</span>   浏览次数:<span id="views"></span> 
        [#if user??] 
        <script type="text/javascript"> 
        $(function() { 
        Cms.collectexist("${base}","${content.id}","cancelSpan","comfirmSpan"); 
        }); 
        </script> 
        [/#if] 
        </div> 
        
    </div> 
      [#if content.mediaPath?? && content.mediaType??] 
 <!--/*ckplayer 超酷视频播放器_实现多集连播 */ -->
<div class="vlist">
<script type="text/javascript" src="/r/cms/www/school/ckplayer/js/laycode2.js"></script>    
<script type="text/javascript" src="/r/cms/www/school/ckplayer/js/offlights.js"></script>
<script type="text/javascript" src="/r/cms/www/school/ckplayer/ckplayer.js" charset="utf-8"></script>

<div class="leftz">
<div class="left">
                 <div id="a1">  

           </div>
</div>
        </div>
<div class="mlist">
<script type="text/javascript" >
              var cur_content_mediaPath="${content.id}";
              var cur_id=0;
              var videoarr = new Array();//新建一个数组来存flash端视频地址,添加方法就像下面一样
              var videoimg = new Array();
              var videotitle =new Array();
          var html5arr = new Array();//新建一个数组来保存HTML5端用到的视频地址,注意,因为本演示只有一种mp4文件,所以html5下所有用到的视频地址都是相同的,请见谅,另外,该数组是一个二维数组
  var video_releaseDate=new Array();
  var video_author=new Array();
  var video_origin=new Array();
  var video_views=new Array();
  
</script>

<div class="boxbox">
<div class="picbox">
<ul class="piclist mainlist">
               [@cms_content_list count='12' orderBy='4' channelId=channel.id titLen='14' append='...' descLen='15' dateFormat='yyyy-MM-dd' channelOption='1']  
                [#list tag_list as a]
<li id="vli_${a_index}"> 
                <div class="mimg"><a href="javascript:void(0);" onclick="playvideo(${a_index});" title="${a.title}" ><img src="${a.titleImg!site.defImg}" width="93" height="65"></a></div>
<div class="mright">
<a href="javascript:void(0);" onclick="playvideo(${a_index});" style="color:#fff" title="${a.title}">  <strong>${a.title}</strong></a><br />
                <a href="javascript:void(0);" onclick="playvideo(${a_index});" style="color:#000">[@text_cut s=a.desc len=descLen /]</a>
</div>    
    <script type="text/javascript" >

                      videoarr['${a_index}']=("${a.mediaPath}");
                     // videoarr.push("${a.mediaPath}");
  videoimg['${a_index}']=("${a.titleImg!site.defImg}");
                      videotitle['${a_index}']=("${a.title}");
              html5arr.push("${a.mediaPath}->video/mp4"); 
  video_releaseDate.push("${a.releaseDate}");
  video_views['${a_index}']=("${a.views}");
  video_origin['${a_index}']=("${a.origin!'本站原创'}");
              video_author['${a_index}']=("${a.author!'本站编辑'}");
                      if(cur_content_mediaPath=='${a.id}'){cur_id='${a_index}';}
  
            </script> 
            
            
            
              </li>            
          [/#list]            
       [/@cms_content_list]         
 
</ul>
        <ul class="piclist swaplist"></ul>
</div>
<div class="og_prev"></div>
<div class="og_next"></div>
</div>

</div>
<script type="text/javascript">
        function playerstop() {
            setTimeend();
        }
        function setTimeend() {//获取下一部视频的播放ID
            nowD++;
            if (nowD >= videoarr.length ) {
                nowD = 0;
            }
            playvideo(nowD);
        }
function loadedHandler(){
if(CKobject.getObjectById('ckplayer_a1').getType()){//说明使用html5播放器
CKobject.getObjectById('ckplayer_a1').addListener('play',playHandler);
CKobject.getObjectById('ckplayer_a1').addListener('pause',pauseHandler);
}
else{
CKobject.getObjectById('ckplayer_a1').addListener('play','playHandler');
CKobject.getObjectById('ckplayer_a1').addListener('pause','pauseHandler');
}
}
function playHandler(){
CKobject._K_('yytf').style.display='none';
}
function pauseHandler(){
CKobject._K_('yytf').style.display='block';
CKobject._K_('yytf').className='yytf_2';
}

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,  
                        i:videoimg[n],
loaded:'loadedHandler',
my_url:encodeURIComponent(window.location.href),
};
                  video=[videoarr[n]+'->video/mp4'];
                  document.title=[videotitle[n]];
                  document.getElementById("video_newtitle").innerHTML=[videotitle[n]];
  document.getElementById("releaseDate").innerHTML=[video_releaseDate[n]];
  document.getElementById("author").innerHTML=[video_author[n]];
  document.getElementById("origin").innerHTML=[video_origin[n]];
  document.getElementById("views").innerHTML=[video_views[n]];
                 //CKobject.embed('/r/cms/www/school/ckplayer/ckplayer.swf','a1','ckplayer_a1','640','400',false,flashvars,html5arr[n]);
          CKobject.embed('/r/cms/www/school/ckplayer/ckplayer.swf','a1','ckplayer_a1','640','400',false,flashvars,video);

for(i=0;i<videoarr.length;i++){//这里是用来改变右边列表背景色
if(i!=nowD){
CKobject._K_('vli_'+i).style.backgroundColor='#333';
}
else{
CKobject._K_('vli_'+i).style.backgroundColor='#666';
}
}
}

playvideo(cur_id);
</script>  
</div>
[/#if]


<div class="clear"></div>
   <div class="content">${txt!}</div> 
     <div class="pagebar">[#include "../style_page/content.html"/]</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>
    <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 id="video_newtitle">${content.title!}</h1></li>
                 <li>制作单位:<span id="origin">${content.attr.Starring!}</span></li>
                 <li>撰稿:<span id="author">${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:23:35  IP:117.115.*.*
第1楼
世间没有一种具有真正价值的东西,可以不经过艰苦辛勤劳动而能够得到的。
1 共1页