打印

可以换皮肤颜色的MediaPlayer

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

1^# 大中小发表于 2006-8-7 20:22

程序的皮肤是根据QQ的播放器做的,后来请我们的美工又做了几套皮肤,看看效果吧,当然有写的不好的请大家指教啊!!

我也是才开始做XHTML+CSS标准化页面啊!!我的QQ:64316429,很希望和大家交流哦!!

播放器界面

演示地址:http://www.cuhere.com.cn/files/mediaplayer(skin)/index.htm

以下是源代码:

style.css

提示：您可以先修改部分代码再运行

player4.css

/*播放器容器*/
#MediaCnt{float:left;margin:0; width:350px; overflow:hidden;}
/*顶部边框皮肤*/
#top {margin:0 auto; width:350px; clear:both;}
#top .topLeft{float:left; width:15px; height:22px; background:url(purple/topleft.gif);}
#top .topcenter{float:left; width:320px; height:22px; background:url(purple/topcenter.jpg);}
#top .topright{float:right; width:15px; height:22px; background:url(purple/topright.gif);}
/*视频文件播放区边框皮肤*/
#Video {margin:0 auto; width:350px; clear:both;}
#Video .VideoLeft{float:left; width:15px; height:245px; background:url(purple/videoleft.gif);}
#Video .Videocenter{float:left; margin:0; width:320px; height:245px; text-align:left;}
#media {margin:0 auto; width:320px; height:245px; background:#000; overflow:hidden; clear:both;}
#Video .Videoright{float:right; width:15px; height:245px; background:url(purple/videoright.gif);}
/*视频信息区边框皮肤*/
#MediaInformation {margin:0 auto; width:350px; height:20px; clear:both;}
#MediaInformation .InfoLeft{float:left; width:15px; height:20px; background:url(purple/videoleft.gif);}
#MediaInformation .Infocenter{float:left; width:320px; height:20px;}
#Information {margin:0 auto; width:320px; height:19px; background:#000; border-top:1px solid #FFF; background:#000; clear:both; overflow:hidden;}
#Information .statImg{float:left; margin:0; padding:2px; width:34px; height:15px; text-align:center; border:none;}
#Information #mediaInfo{float:left; margin:0; padding:4px 2px 4px 2px; width:219px; height:12px; font-size:12px; color:#89A4FF; border:none; text-align:left;}
#Information #mediaTime{float:right; margin:0; padding:4px 2px 4px 2px; width:54px; height:12px; font-size:12px; color:#89A4FF; border:none; text-align:right;}
#MediaInformation .InfoRight{float:right; width:15px; height:20px; background:url(purple/videoright.gif);}
/*控制按钮皮肤*/
.controls {margin:0 auto; width:350px; clear:both;}
.controls .ctrLeft{float:left; width:15px; height:54px; background:url(purple/ctrLeft.gif);}
.controls .ctrBtns{float:left; width:320px; height:54px;}
#pZone {margin:0 auto; width:320px; height:19px; font-size:1px; position: relative; left:0; text-align:left; background:url(purple/loading.gif)}
#pBox {overflow: hidden; position: relative; cursor:e-resize; left:5px; top:6px; width:23px;}
.Buttons {margin:0 auto; width:320px; height:21px; clear:both; overflow:hidden;}
.Buttons .BtnLeft{float:left; width:59px; height:21px; background:url(purple/BtnLeft.gif);}
.Buttons #btnPlayStop{float:left; margin:0; width:36px; height:21px;}
.Buttons #btnPlayPause{float:left; margin:0; width:34px; height:21px;}
.Buttons #btnFullScrean{float:left; margin:0; width:29px; height:21px;}
.Buttons .btnCenter{float:left; margin:0; width:5px; height:21px; font-size:1px; background:url(purple/BtnCenter.gif);}
.Buttons #btnOffOnSound{float:left; margin:0; width:32px; height:21px;}
.Buttons #vZone{float:left;position: relative; left:0; margin:0; width:67px; height:21px; background:url(purple/SoundBg.gif) center repeat-x; text-align:left;}
#vBox {overflow: hidden; position: relative; cursor:e-resize; left:34px; top:4px; width:5px;}
.Buttons .BtnRight{float:right; width:58px; height:21px; background:url(purple/BtnRight.gif);}
.CtrBottom {margin:0 auto; width:320px; height:14px; font-size:1px; background:url(purple/BtnBottom.gif);}
.controls .ctrRight{float:right; width:15px; height:54px; background:url(purple/ctrRight.gif);}
/*视频文件标题栏*/
.MediaTitle{margin:0 auto; width:350px; padding:4px 0 4px 0; height:12px; background:url(purple/MediaTitlebg.gif); color:#FFF; font:12px 宋体; text-align:center;}
/*皮肤选择器样式*/
#page_options{float:right; margin:0; width:20px; height:17px; z-index:90; position: relative; clip: rect( ); text-align:right;}
#Sright{float:right; margin:0; padding:3px; width:80px; height:60px; position: absolute; left:24px; top:0; z-index:1; filter:progid:DXImageTransform.Microsoft.Gradient(StartColorStr=#fffefeff,EndColorStr=#fff3f5fb, GradientType=0)progid:DXImageTransform.Microsoft.Shadow(Color=#ffb6bccb, Strength=2, Direction=135); border:1px solid #AB97BA; background:#F2F0F5; visibility: hidden; text-align:center; overflow:hidden;}
#indexColor{margin:0 auto;padding:2px; width:74px; border:1px solid #AB97BA; cursor:pointer; color:#AB97BA; font:bold 13px 黑体;text-align:right;}
#blank4{margin:0 auto; height:4px; font-size:1px; width:50px;}
.border1{border:1px solid #000;}

提示：您可以先修改部分代码再运行

index.htm

<!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>Media Player测试程序</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="skin/player4.css" rel="stylesheet" type="text/css" id="cssfile" />
<script language="javascript" src="js/changeskin.js" type="text/javascript"></script>
</head>
<body>	
<div id="ping">
<script type="text/javascript">
function T(n){
   document.getElementById("MediaCnt").style.fontSize=n+"px";
   }
</script>
</div>
<div id="MediaCnt">
     <div id="top">
          <div class="topLeft"></div>
	      <div class="topcenter">
					<div id="page_options"><a style="cursor:pointer" onclick="pageOptions()"><img src="images/tong4.gif" width="17" height="17" border="0" id="tong" alt="请选择你喜欢的播放器皮肤！" /></a>
					     <div id="Sright">
						 <div id="indexColor" onclick="pageOptions()"><img src="images/mColor4.gif" width="13" height="13" align="left" class="border1" id="curMediaColor" />当前皮肤</div>
						 <div id="blank4"></div>
					     <a style="cursor:pointer" onclick="ChangeSkin(1)"><img src="images/mColor1.gif" width="13" height="13" alt="海蓝" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(2)"><img src="images/mColor2.gif" width="13" height="13" alt="草绿" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(3)"><img src="images/mColor3.gif" width="13" height="13" alt="墨黄绿" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(4)"><img src="images/mColor4.gif" width="13" height="13" alt="幽紫" class="border1" /></a><br />
					     <a style="cursor:pointer" onclick="ChangeSkin(5)"><img src="images/mColor5.gif" width="13" height="13" alt="咖啡色" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(6)"><img src="images/mColor6.gif" width="13" height="13" alt="粉红" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(7)"><img src="images/mColor7.gif" width="13" height="13" alt="咖啡红" class="border1" /></a> <a style="cursor:pointer" onclick="ChangeSkin(8)"><img src="images/mColor8.gif" width="13" height="13" alt="墨绿蓝" class="border1" /></a>
					     </div>
					</div>
					<div class="clear"></div>
		  </div>
	      <div class="topright"></div>
	 <div class="clear"></div>	  
	 </div>
	 <div id="Video">
	      <div class="VideoLeft"></div>
		  <div class="Videocenter">
		       <script language="JScript.Encode">#@~^kgAAAA==@&7l.,m!DsbV~',J4YDwl&J44snNblR$5 mK:J:nNrCJ/2WMO/J TT+!v&[MWUoD-J!ZGkt+7lcA:7JI@&7l.~7k9Ot,'P2+Ti@&\mD~\unbo4Y,xPycXI@&\l.~mEOWhsmXo^lTP',Fp@&AC0AAA==^#~@</script>
			   <div id="media"><script language="javascript" src="js/MediaPlayer.js"></script></div>
		  </div>
		  <div class="Videoright"></div>
	 <div class="clear"></div>  
	 </div>
	 <div id="MediaInformation">
	      <div class="InfoLeft"></div>
		  <div class="Infocenter">
		       <div id="Information">
			        <div class="statImg"><img src="skin/purple/stop.gif" width="32" height="15" border="0" id="statImg" /></div>
					<div id="mediaInfo">准备就绪</div>
					<div id="mediaTime"></div>
			   <div class="clear"></div>	
			   </div>	   
		  </div>
		  <div class="InfoRight"></div>	
	 <div clear="clear"></div>
	 </div>
	 <div class="controls">
	      <div class="ctrLeft"></div>
		  <div class="ctrBtns">
		       <div id="pZone" onMouseDown="mouseDown(0)">
			        <div id="pBox"><img src="skin/purple/pBox.gif" width=23 height=8 alt="移动滑块控制影片进度" /></div>
			   </div>
			   <div class="Buttons">
			        <div class="BtnLeft"></div>
					<div id="btnPlayStop"><img src="skin/purple/BtnPlay.gif" alt="播放/暂停" name="playControl" width="36" height="21" border="0" id="playControl"" onClick="toPlay();" style="cursor:pointer;" /></div>
					<div id="btnPlayPause"><img src="skin/purple/BtnStop.gif" width="34" height="21" border="0" style="cursor:pointer;" onClick="toStop();" alt="停止"/>
			     <div class="clear"></div></div>
					<div id="btnFullScrean"><img src="skin/purple/BtnFullScrean.gif" width="29" height="21" border="0" style="cursor:pointer;" onClick="fullScreen();" alt="全屏"/></div>
					<div class="btnCenter"></div>
					<div id="btnOffOnSound"><img src="skin/purple/BtnOnSound.gif" alt="静音开关" name="muteControl" width="32" height="21" border="0" id="muteControl" style="cursor:pointer;" onClick="toMute();"/></div>
					<div id="vZone" onMouseDown="mouseDown(1)"><div id="vBox"><img src="skin/purple/BtnSoundCtrBar.gif" width=5 height=13 alt="移动滑块控制音量大小" /></div></div>
					<div class="BtnRight">
					</div>	
			   </div>
			   <div class="CtrBottom"></div>
	      </div>
		  <div class="ctrRight"></div>
     <div class="clear"></div>		  	  
	 </div>
	 <script language="javascript" src="js/Player4.js" id="jsPlayer"></script>
	 <div class="MediaTitle">
	 舍瓦探班意大利阵营 与昔日队友嬉笑打闹
	 </div>
<div class="clear"></div>	 
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 bound0 于 2006-8-16 15:25 编辑 ]

本帖最近评分记录

hutia 威望 +1 原创内容 2006-8-23 09:17

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

2^# 大中小发表于 2006-8-7 20:24

其余的代码

changeskin.js

提示：您可以先修改部分代码再运行

[ 本帖最后由 bound0 于 2006-8-16 15:26 编辑 ]

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

3^# 大中小发表于 2006-8-7 20:24

代码

mediaplayer.js

function getObj(objName)
{
        try
		{
			if (document.getElementById)
			{
					return eval('document.getElementById("'+objName+'")');
			}
			else
			{
					return eval('document.all.'+objName);
			}
		}
		catch(e)
		{}
}
function getOLeft(myObj)
{
        curObj = myObj;
        var objLT = curObj.offsetLeft;
        while(curObj!=curObj.offsetParent && curObj.offsetParent){
                curObj=curObj.offsetParent;
                if(curObj.tagName=="div"){
                        objLT += curObj.offsetLeft;
                }
        }
        return objLT;
}
//truncation string
function trunStr(str)
{
	if (str.length > 12)
		return	str.substr(0,12) + " … ";
	else
		return str;
}
function toPlay()
{
		if (getObj("MediaPlayer").playState != 3)
		{
			if (getObj("MediaPlayer").controls.isAvailable('Play'))
			{
				getObj("MediaPlayer").controls.play();
				getObj("playControl").src="skin/purple/BtnPause.gif";
				getObj("mediaInfo").innerText="缓冲";
			}
		}
		else
		{
			toPause();
		}
}
function toPause()
{
        if (getObj("MediaPlayer").currentMedia.duration > 0)
        {
                infoChange = 1;
				getObj("MediaPlayer").controls.Pause();
                getObj("playControl").src="skin/purple/BtnPlay.gif";
				getObj("statImg").src="skin/purple/pause.gif";
				getObj("mediaInfo").innerText="已暂停";
        }
}
function toStop()
{
        if (getObj("MediaPlayer").currentMedia.duration > 0)
        {
				getObj("MediaPlayer").controls.Stop();
                getObj("playControl").src="skin/purple/BtnPlay.gif";
				getObj("statImg").src="skin/purple/stop.gif";
				getObj("mediaInfo").innerText="已停止";
				
        }
}
function toMute()
{
        if(getObj("MediaPlayer").settings.mute.toString().toLowerCase()=='true')
        {
                getObj("MediaPlayer").settings.mute='False';
                getObj("muteControl").src = "skin/purple/BtnOnSound.gif";
                getObj("muteControl").alt = "关闭声音";
        }else{
                getObj("MediaPlayer").settings.mute='True';
                getObj("muteControl").src = "skin/purple/BtnOffSound.gif";
                getObj("muteControl").alt = "打开声音";
        }
}
function fullScreen()
{
        try
		{
			if(getObj("MediaPlayer").currentMedia.duration > 0)
			{
					getObj("MediaPlayer").fullScreen = true;
			}
		}
		catch(e)
		{}
}
var isPorV = 0;
function mouseDown(objSign)
{
        isPorV = objSign;
        if(isPorV==0){
                if(getObj("MediaPlayer").currentMedia.duration > 0)
                {
                        pFlag = true;
                        if(window.event.srcElement.id!="pZone") 
                                getObj("pBox").style.left = getObj("pBox").offsetLeft -1;
                        else 
                                getObj("pBox").style.left = (window.event.x-12);
                }
        }
        else if(isPorV==1)
        {
                vFlag = true;
                if(window.event.srcElement.id!="vZone") 
                        getObj("vBox").style.left = getObj("vBox").offsetLeft;
                else 
                        getObj("vBox").style.left = (window.event.x-3);
        }
}
function mouseMove()
{
        if(isPorV==0)
        {
                if(getObj("MediaPlayer").currentMedia.duration > 0)
                {
                        if(pFlag) getObj("pBox").style.left = window.event.clientX - getOLeft(getObj("pZone")) - 12 +"px";
                        if (parseInt(getObj("pBox").style.left.replace("px","")) > pZoneWidth) getObj("pBox").style.left=pZoneWidth +"px";
                        if (parseInt(getObj("pBox").style.left.replace("px","")) < -5) getObj("pBox").style.left=-5 +"px";
                }
        }
        else if(isPorV==1)
        {
                if(vFlag) getObj("vBox").style.left = window.event.clientX - getOLeft(getObj("vZone")) - 4 +"px";
                if (parseInt(getObj("vBox").style.left.replace("px","")) > 56) getObj("vBox").style.left=56 +"px";
                if (parseInt(getObj("vBox").style.left.replace("px","")) < 10) getObj("vBox").style.left=10 +"px";
                
                if(isPorV==1)
                {
                        if (vFlag)
                        {
                                tempVol = (parseInt(getObj("vBox").style.left) -9)*1.7;
                                getObj("MediaPlayer").settings.volume=Math.round(tempVol);
                        }
                }
                
        }
}
        
function mouseUp()
{
        if(isPorV==0){
                if(getObj("MediaPlayer").currentMedia.duration > 0){
                        if (pFlag){
                                var duration = getObj("MediaPlayer").currentMedia.duration;
                                getObj("MediaPlayer").controls.CurrentPosition=duration * (parseInt(getObj("pBox").style.left)/pZoneWidth);
                        }
                        pFlag = false;
                }
        }else if(isPorV==1){
                if (vFlag){
                        tempVol = (parseInt(getObj("vBox").style.left) -9)*1.7;
                        getObj("MediaPlayer").settings.volume=Math.round(tempVol);
                }
                vFlag = false;
        }
}
function mouseEnd()
{
        window.event.returnValue = false;
}
function OnloadFun()
{
        startdrag();
        setInterval("FixPos()",1000);
}
var fFlag= false;
//drag func
var pFlag = false;
var pZoneWidth = 320 - 29;
var infoChange = 1;
var bufferingProgress;
var downloadProgress;
var bitRate;
var currentPositionString;
var mediaTitle;
var itemTitle;
var mediaInfo = getObj("mediaInfo");
function startdrag()
{
        if(getObj("MediaPlayer").currentMedia.duration||(!isNaN(getObj("MediaPlayer").currentMedia.duration))){
                window.document.onmousemove = mouseMove;
                window.document.ondragstart = mouseEnd;
                window.document.onmouseup = mouseUp;
        }
}
function FixPos()
{
        if(getObj("MediaPlayer").currentMedia.duration>0)
		{
                var duration = getObj("MediaPlayer").currentMedia.duration;
                var pos = getObj("MediaPlayer").controls.CurrentPosition;
                if (pos == 0)
                {
                        var pBoxPos = Math.round(pos/duration*pZoneWidth)+5;
                }
                else
                {
                        var pBoxPos = Math.round(pos/duration*pZoneWidth)+5;
                }
                if (!isNaN(pBoxPos)) 
                {
                        getObj("pBox").style.left = pBoxPos;
                }
                if(getObj("MediaPlayer").playState == 1) 
                {
                        getObj("playControl").src="skin/purple/BtnPlay.gif";
						getObj("pBox").style.left = 5;
						getObj("statImg").src="skin/purple/stop.gif";
						mediaInfo.innerText="已停止";
                }
						
				
				bufferingProgress = getObj("MediaPlayer").network.bufferingProgress;
				downloadProgress = parseInt(getObj("MediaPlayer").network.downloadProgress);
				bitRate = getObj("MediaPlayer").network.bitRate;
				currentPositionString = getObj("MediaPlayer").Controls.currentPositionString;
				mediaTitle = getObj("MediaPlayer").currentPlaylist.item(0).getItemInfo("Title");
				itemTitle = getObj("MediaPlayer").currentPlaylist.getItemInfo("Title");
				
				getObj("mediaTime").innerText = currentPositionString.toString();
				
				
				switch(getObj("MediaPlayer").playState)
				{
						case 7:
						{
								mediaInfo.innerText="准备就绪";		
						}
						break;
						
						case 6:
						{
								getObj("statImg").src="skin/purple/play.gif";						
				                                getObj("playControl").src="skin/purple/BtnPause.gif";
								if ( parseInt(bufferingProgress) > 0 && parseInt(bufferingProgress) < 100 )
								{
										mediaInfo.innerText="缓冲处理: 完成 "+bufferingProgress.toString()+"%";
								}
								else
								{
										mediaInfo.innerText="缓冲处理";
								}
						}
						break;
						
						case 3:
						{
								getObj("statImg").src="skin/purple/play.gif";						
				                                getObj("playControl").src="skin/purple/BtnPause.gif";
								if ( downloadProgress == 0 )
								{
										mediaInfo.innerText="正在播放";	
								}
								showPlayInfo();
						}
						break;
				}
        }
}
function showPlayInfo()
{
		if ( infoChange ==1 )
		{
				if ( downloadProgress < 100 )
				{
						mediaInfo.innerText="正在播放: "+downloadProgress.toString()+"% 已下载";
				}
				else
				{
						mediaInfo.innerText="正在播放: "+Math.round(bitRate/1000)+" 千比特/秒";			
				}
				if ( downloadProgress == 0 )
				{
						mediaInfo.innerText="正在播放";	
				}
		}
	
		if ( infoChange ==4 )
		{		
				mediaInfo.innerText="播放列表: "+itemTitle.toString();
		}
	
		if ( infoChange ==8 )
		{
				mediaInfo.innerText="剪辑: "+trunStr(mediaTitle).toString();		
		}
		if ( infoChange < 11 )
		{
				infoChange += 1;
		}
		else
		{
				infoChange = 1;
		}
}
OnloadFun();

提示：您可以先修改部分代码再运行

[ 本帖最后由 bound0 于 2006-8-16 15:26 编辑 ]

TOP

请大家尊重和保护奥运知识产权。

0yun123

纯真

银牌会员

帖子: 1397
体力: 1810
威望: 4
当前: 福建厦门

专长 网页设计,UI,策划

4^# 大中小发表于 2006-8-16 13:03

不错，收藏起来。

我的BLOG

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

qeho

新手上路

帖子: 19
体力: 0
威望: 0

5^# 大中小发表于 2006-8-22 20:25

收下

TOP

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

6^# 大中小发表于 2006-8-23 08:54

谢谢支持!!!

自己来顶下自己,呵呵!

TOP

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

7^# 大中小发表于 2006-8-23 21:48

还有更好的播放器程序吗?

大家还有其他的播放器程序吗,发过来看看啊!

TOP

yaohaixiao [楼主]

银牌会员

帖子: 772
体力: 1471
威望: 15
当前: 上海徐汇
离线: 1 天

专长 网页设计,前端制作,JS

8^# 大中小发表于 2006-8-24 22:34

晕,我发现这里向我这样发布好代码的人实在不多

哎,也没什么人顶,没有积极性了啊,呵呵!!!

——————————————————---
谁说的，发代码的人很多啊；都加分了还没有积极性？这里不让灌水干顶，所以才好像没人顶似的，其实有很多人支持你的。

[ 本帖最后由 bound0 于 2006-9-11 19:58 编辑 ]

TOP