一个简单的仿sohu电视剧播放列表[脚本]

 实例下载地址： http://download.youkuaiyun.com/source/2994263

 

一个简单的用javascript脚本写的仿sohu电视剧播放列表实例
可引用土豆 ku6等视频资源
加入最大化播放器控制，ESC取消最大化播放器

http://tv.sohu.com/20101228/n278548504.shtml

 

playList.js

/* 剧集列表显示 */ var current = 1; var objList = "([{id:'1',title:'第1集',url:'http://share.vrs.sohu.com/200948/v.swf'},{id:'2',title:'第2集',url:'http://share.vrs.sohu.com/201925/v.swf'},{id:'3',title:'第3集',url:'http://share.vrs.sohu.com/206873/v.swf'},{id:'4',title:'第4集',url:'http://share.vrs.sohu.com/207746/v.swf'},{id:'5',title:'第5集',url:'http://share.vrs.sohu.com/211417/v.swf'},{id:'6',title:'第6集',url:'http://share.vrs.sohu.com/212167/v.swf'},{id:'7',title:'第7集',url:'http://share.vrs.sohu.com/215562/v.swf'},{id:'8',title:'第8集',url:'http://share.vrs.sohu.com/216329/v.swf'},{id:'9',title:'第9集',url:'http://share.vrs.sohu.com/220644/v.swf'},{id:'10',title:'第10集',url:'http://share.vrs.sohu.com/221670/v.swf'},{id:'11',title:'第11集',url:'http://share.vrs.sohu.com/226549/v.swf'}])"; var arr = eval(objList); //显示缩略列表 function ShowSmallList(current,arr) { var arrId = current-1;//当前数组序号 var total = arr.length; //列表小于10集 if(total <= 10) { for(i=0;i<arr.length;i++) { if(arrId == i) ShowPlay(arr[i].id,arr[i].title,"ptitle2"); else ShowPlay(arr[i].id,arr[i].title,"ptitle"); } } //列表>10集 当前播放集<8 if(total > 10 && current < 8) { for(i=0;i<9;i++) { if(i == 8){ShowBtn();} else { if(arrId == i) {ShowPlay(arr[i].id,arr[i].title,'ptitle2');} else ShowPlay(arr[i].id,arr[i].title,'ptitle'); } } ShowPlay(arr[total-1].id,arr[total-1].title,'ptitle');//最后集 } //列表>10集 当前播放集>=8，当前集后面的集数<=5集 if(total > 10 && current >= 8 && (total - current <= 5)) { ShowPlay(arr[0].id,arr[0].title,'ptitle');//第一集 ShowBtn();//缩略按钮 for(i=total-8;i<total;i++) { if(arrId == i) ShowPlay(arr[i].id,arr[i].title,'ptitle2'); else ShowPlay(arr[i].id,arr[i].title,'ptitle'); } } //列表>10集 当前播放集>=8，当前集后面的集数>5集 if(total > 10 && current >= 8 && (total - current > 5)) { ShowPlay(arr[0].id,arr[0].title,'ptitle');//第一集 ShowBtn();//缩略按钮 for(i=current-2;i<current+4;i++) { if(arrId == i) ShowPlay(arr[i].id,arr[i].title,'ptitle2'); else ShowPlay(arr[i].id,arr[i].title,'ptitle'); } ShowBtn();//缩略按钮 ShowPlay(arr[total-1].id,arr[total-1].title,'ptitle');//最后集 } } //显示全部列表 function ShowAll(current,arr) { var arrId = current-1;//当前数组序号 for(i=0;i<arr.length;i++) { if(arrId == i) ShowPlay(arr[i].id,arr[i].title,"ptitle2"); else ShowPlay(arr[i].id,arr[i].title,"ptitle"); } } //div列表内容显示 function ShowPlay(id,title,style) { var outStr = "<a class='" + style + "' onClick='Play(" + id + ");' style="cursor:hand" mce_style="cursor:hand"> " + title + "</a>"; document.getElementById("playList").innerHTML += outStr; } //显示缩略标记按钮 function ShowBtn() { var outStr = "<a class='ptitle' style="cursor:hand" mce_style="cursor:hand" onClick='showList();'> ... </a>"; document.getElementById("playList").innerHTML += outStr; } //折叠展开列表 var showFlag=false; function showList() { document.getElementById("playList").innerHTML = ""; if(!showFlag){//展开 document.getElementById("imgbtn").src="images/hide.jpg"; ShowAll(current,arr); showFlag = true; } else//收起 { document.getElementById("imgbtn").src="images/show.jpg"; ShowSmallList(current,arr); showFlag = false; } } //播放 function Play(playID) { for(i=0;i<arr.length;i++) { if(arr[i].id == playID) { showFlag=true; current = playID; document.getElementById("swfplay").src = arr[i].url; showList(); break; } } } /*最大化播放器，ESC取消还原*/ var flag = false; function setFull() { document.getElementById('swfplay').style.position ='absolute'; document.getElementById('swfplay').style.top =document.body.scrollTop; document.getElementById('swfplay').style.left ='0px'; document.getElementById('swfplay').style.width = document.documentElement.clientWidth ; document.getElementById('swfplay').style.height = document.documentElement.clientHeight ; document.body.style.overflow = 'hidden'; flag = true; } function keyDown(){ if(event.keyCode==27 && flag){ document.body.style.overflow = 'auto'; document.getElementById('swfplay').style.position ='static'; document.getElementById('swfplay').style.width = '610px'; document.getElementById('swfplay').style.height = '440px'; flag = false; } } document.onkeydown = keyDown;

 

 css.css

.ptitle { width:60px; height:20px; padding-top:2px; overflow:hidden; background-color:#F2FAFD; border:1px dotted #CCC; text-align:center; float:left; margin-right:2px; cursor:hand; margin-top:2px; margin-bottom:5px; font-size:12px} .ptitle2 { width:60px; height:20px;padding-top:2px; overflow:hidden; background-color:#418DCC; color:#FFFFFF; border:1px dotted #CCC; text-align:center; float:left; margin-right:2px; cursor:hand; margin-top:2px;margin-bottom:5px;font-size:12px} #swfplay{ margin-bottom:10px;} #playList{width:650px; border:1px solid #ccc; padding:5px; height:auto} #title{float:left; font-size:14px; font-weight:bold; color:#333333; padding-left:5px} #control{float:right; padding-right:15px; cursor:hand} #player{ width:640px; padding:10px;border:1px solid #ccc; margin-bottom:30px;}

页面play.html

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>电影播放</title> <link type="text/css" href="css.css" mce_href="css.css" rel="stylesheet" /> <mce:script type="text/javascript" src="playList.js" mce_src="playList.js"></mce:script> </head> <body> <div style="width:660px"> <div id="player"><iframe name="swfplay" id="swfplay" src="" width="600" height="440" scrolling="no" frameborder="0"></iframe><input type="button" value="全屏播放" style="float:right" mce_style="float:right" onClick="setFull();"></div> <div id="title">剧集列表</div> <div id="control" onClick="showList();"><img id="imgbtn" src="images/show.jpg" mce_src="images/show.jpg"></div> <div id="playList"> </div> </div> <mce:script type="text/javascript"><!-- Play(current); // --></mce:script> </body> </html>