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

 实例下载地址： http://download.csdn.net/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集 当前播放集<8if(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>