网页形式MediaPlayer播放器代码特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是网页形式MediaPlayer播放器代码特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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" />
<meta name="keywords" content="JS代码,视频播放,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为网页形式MediaPlayer播放器代码下载，属于站长常用代码" />
<title>网页形式MediaPlayer播放器代码下载</title>
<link href="css/blueplayer.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/common.js"></script>
<script language="javascript" type="text/javascript" src="js/MediaPlayer1.0.js"></script>
<script language="javascript" type="text/javascript" src="js/Player1.0.js"></script>
</head>
<body><br />
<!--视频播放器start-->
	      <div class="v_player">
		       <div class="v_top1"></div>
			   <div class="v_top2"></div>
			   <div class="v_top3"></div>
			   <br class="clear" />
		  </div>
		  <div class="v_player">
		       <div class="v_mid1"></div>			   
		       <div class="v_mid2">
			        <div id="playzone">
					     <div id="perpic"><img src="images/player_adv.png" width="320" height="245" alt="" /></div>
			             <div id="playerList"></div>
					</div>	 
			        <div class="m_info">
					     <div id="mediaTime">01:45</div>
						 <div id="mediaInfo">准备就绪</div>
						 <br class="clear" />
					</div>
			   </div>
		       <div class="v_mid3"></div>
			   <br class="clear" />
		  </div>
		  <div class="v_line"></div>
		  <div class="v_player">
		       <div class="left_control"></div>
	           <div class="cnt_control">
			        <div class="btnPlay"><img src="mediaplayer/lightblue/p_play1.gif" id="Play" class="pointer" onclick="toPlay()" alt="播放/暂停" width="34" height="36" /></div>
					<div class="btnStop"><img src="mediaplayer/lightblue/p_stop.gif" name="Stop" width="23" height="23" class="pointer" id="Stop" alt="停止播放" onclick="toStop()" /></div>
					<div class="btnInfo">
				         <div class="pbar">
						      <div class="vloadingleft"></div>
						      <div class="v_loading">
							       <div class="pzonetop"></div>
							       <div onmousedown="mouseDown(0)" id="pZone"><img id="pBox" height="10" alt="视频进度调节" src="mediaplayer/lightblue/p_vbar.gif" width="10" /></div>
							  </div>
							  <div class="btnSound"><img src="mediaplayer/lightblue/p_mute.gif" width="23" height="25" class="pointer" id="Mute" alt="声音开/关" onclick="toMute()" /></div>
							  <div class="clear"></div>
					     </div>
					     <div id="v_info"></div>
				    </div>
					<div class="sbar">
					     <div class="vzonetop"></div>
					     <div onmousedown="mouseDown(1)" id="vZone"><img id="vBox" height="10" alt="音量大小调节" src="mediaplayer/lightblue/v_box.gif" width="7" /></div>
						 <div class="fullscreen"><img id="Screen" onclick="toScreen()" class="pointer" src="mediaplayer/lightblue/p_screen.gif" alt="全屏观看视频" width="22" height="23" /></div>
					</div>
					<div class="clear"></div>
		       </div>
			   <div class="right_control"></div>
			   <div class="clear"></div>
		  </div>
  <!--视频播放器end-->
</body>
</html>

JS代码(common.js):

<!--function setOnloadEvent(func){
	var oldonload = window.onload;
	if(typeof window.onload != "function"){
	window.onload = func;
}
else{
	window.onload = function(){
	oldonload();
	func();
}
}
}
function $(objectId){
	if(document.getElementById && document.getElementById(objectId)){
	// W3C DOM return document.getElementById(objectId);
}
else if (document.all && document.all(objectId)){
	// MSIE 4 DOM return document.all(objectId);
}
else if (document.layers && document.layers[objectId]){
	// NN 4 DOM.. note:this won't find nested layers return document.layers[objectId];
}
else{
	return false;
}
}
//-->

JS代码(ping.js):

var pvCurDomain="";
	var pvCurUrl="";
	var pvRefDomain="";
	var pvRefUrl="";
	var pvRealDomain="";
	var pvRealDomainToSet="qq.com";
	var pvGifUrl="http://pingfore.qq.com/pingd?";
	var pvDoc=document;
	if(window!=top){
	try{
	pvDoc=top.document;
}
catch(e){
}
;
}
var pvLoc=pvDoc.location;
	var pvBody=pvDoc.body;
	var pvNone="-";
	var pvVersion="3.3";
	if(!pvRepeatCount){
	var pvRepeatCount=1;
}
if(!String.prototype.split){
	String.prototype.split=function(s){
	var arr=new Array();
	var pos1=pos2=0;
	var count=0;
	while((pos2=this.indexOf(s,pos1))>0){
	arr[count++]=this.substring(pos1,pos2);
	pos1=pos2+s.length;
}
if(this.length>0){
	pos1=pos1>0?pos1:pos1+s.length;
	arr[count]=this.substr(pos1);
}
return arr;
}
;
}
function pgvGetParameter(name,src){
	if(!name||name==""||!src||src==""){
	return "";
}
var r=new RegExp("(\\?|&)*"+name+"=([^&]*)(&|$)");
	var m=src.match(r);
	return(!m?"":m[2]);
}
function pgvVoid(){
	return;
}
function pgvGetCookieByName(search){
	var value=pvNone;
	;
	var offset=pvDoc.cookie.indexOf(search);
	if(offset!=-1){
	offset+=search.length;
	end=pvDoc.cookie.indexOf(";
	",offset);
	if(end==-1){
	end=pvDoc.cookie.length;
}
value=unescape(pvDoc.cookie.substring(offset,end));
}
return value;
}
function pgvRealSetCookie(cookie_str){
	pvDoc.cookie=cookie_str+";
	path=/;
	domain="+pvRealDomainToSet+";
	expires=Sun,18 Jan 2038 00:00:00 GMT;
	";
}
function pgvGetCookieSetDomain(){
	var aDot=new Array();
	var domainToSet,j=0;
	for(var i=0;
	i<pvRealDomain.length;
	i++){
	if(pvRealDomain.charAt(i)=='.'){
	aDot[j]=i;
	j++;
}
}
var pos=pvRealDomain.indexOf(".cn");
	if(pos!=-1){
	aDot.length--;
}
if(aDot.length<1){
	domainToSet="qq.com";
}
else if(aDot.length==1){
	domainToSet=pvRealDomain;
}
else{
	domainToSet=pvRealDomain.substring(aDot[aDot.length-2]+1,pvRealDomain.length);
}
return domainToSet;
}
function pgvGetDomainByUrl(){
	var pos=pvDoc.URL.indexOf("://");
	var dm=pvDoc.domain;
	if(pos!=-1){
	var strUrl=pvDoc.URL.substr(pos+3,pvDoc.URL.length-pos-3);
	var pos2=strUrl.indexOf("/");
	if(pos2!=-1){
	dm=strUrl.substr(0,pos2);
}
}
return dm;
}
function pgvGetDomainInfo(needtitle){
	var dm="",url="",title="";
	dm=pvCurDomain;
	if(pvCurDomain==""){
	dm=pgvGetDomainByUrl();
}
pvRealDomain=pvCurDomain=dm;
	url=escape(pvCurUrl);
	if(pvCurUrl==""&&pvLoc.pathname){
	url=escape(pvLoc.pathname);
}
title=pvNone;
	if(pvDoc.title){
	title=pvDoc.title;
}
if(needtitle&&needtitle=="title"){
	return("dm="+dm+"&url="+escape(url));
}
else{
	return("dm="+dm+"&url="+escape(url)+"&tt="+escape(title));
}
}
function pgvGetRefInfo(){
	var refdm=refurl=pvNone,refStr=pvDoc.referrer;
	var adtag=pgvGetParameter("ADTAG",pvDoc.URL);
	if(adtag!=pvNone){
	var pos=adtag.indexOf("CLIENT.QQ");
	if(pos!=-1){
	refdm="CLIENT.QQ";
}
pos=adtag.indexOf("_");
	var adtagTmp=adtag.substr(pos+1,adtag.length);
	var pos2=adtagTmp.indexOf(".");
	if(pos2!=-1){
	refurl=adtagTmp.substr(0,pos2);
}
}
var pos=refStr.indexOf("://");
	if(pos!=-1&&refdm==pvNone){
	var refStr2=refStr.substr(pos+3,refStr.length);
	refdm=refStr2;
	var pos=refStr2.indexOf("/");
	if(pos!=-1){
	refdm=refStr2.substr(0,pos);
	var refStr3=refStr2.substr(pos,refStr2.length);
	refurl=refStr3;
	pos=refStr3.indexOf("?");
	if(pos!=-1){
	var dmReg2=new RegExp("^(.*)(\\?.*)$");
	var dmMatch2=refStr3.match(dmReg2);
	if(dmMatch2){
	refurl=dmMatch2[1];
}
}
}
}
if(pvRefDomain!="")refdm=pvRefDomain;
	if(pvRefUrl!="")refurl=pvRefUrl;
	pvRealReferInfo=refdm;
	pvRefDomain=refdm;
	pvRefUrl=refurl;
	return("&rdm="+refdm+"&rurl="+escape(refurl));
}
function pgvGetUserInfo(){
	if(navigator.cookieEnabled!=true){
	return "&pvid=NoCookie"}
var pvid=pgvGetCookieByName("pvid=");
	pgvSetCookies(pvid);
	pvRealPvid=pvid;
	return "&pvid="+pvid;
}
function pgvSetCookies(pvid){
	var pvidtmp=pvid;
	if(pvid==pvNone){
	var curDate=new Date();
	var curMs=curDate.getUTCMilliseconds();
	pvidtmp=(Math.round(Math.random()* 2147483647)*curMs)%10000000000;
}
pvRealDomainToSet=pgvGetCookieSetDomain();
	pgvRealSetCookie("pvid="+pvidtmp);
}
function pgvGetMainEnvInfo(){
	var scr=scl=lang=flash=cpuc=pf=ce=tz=pvNone,java=0;
	var n=navigator;
	if(self.screen){
	scr=screen.width+"x"+screen.height;
	scl=screen.colorDepth+"-bit";
}
if(n.language){
	lang=n.language.toLowerCase();
}
else if(n.browserLanguage){
	lang=n.browserLanguage.toLowerCase();
}
java=n.javaEnabled()?1:0;
	cpuc=n.cpuClass;
	pf=n.platform;
	var now=new Date();
	tz=now.getTimezoneOffset()/60;
	return("&scr="+scr+"&scl="+scl+"&lang="+lang+"&java="+java+"&cc="+cpuc+"&pf="+pf+"&tz="+tz);
}
function pgvGetExtendEnvInfo(){
	var ret="";
	try{
	var flash=pgvGetCookieByName("flv=");
	if(flash==pvNone){
	ret+="&flash="+pgvFlashInfo();
}
var currentUrl=pvLoc.href;
	var isHp="N";
	if(pvBody.addBehavior&&pvBody.isHomePage){
	pvBody.addBehavior("#default#homePage");
	isHp=pvBody.isHomePage(currentUrl)?"Y":"N";
}
if(isHp=="Y")ret+="&hp=Y";
	var connectType=pvNone;
	if(pvBody.addBehavior){
	pvBody.addBehavior("#default#clientCaps");
	var connectType=pvBody.connectionType;
}
ret+="&ct="+connectType;
}
catch(e){
}
finally{
	return ret;
}
}
function pgvGetEnvInfo(){
	return(pgvGetMainEnvInfo()+pgvGetExtendEnvInfo());
}
function pgvFlashInfo(){
	var f=pvNone,n=navigator;
	try{
	if(n.plugins&&n.plugins.length){
	for(var i=0;
	i<n.plugins.length;
	i++){
	if(n.plugins[i].name.indexOf('Shockwave Flash')!=-1){
	f=n.plugins[i].description.split('Shockwave Flash ')[1];
	break;
}
}
}
else if(window.ActiveXObject){
	for(var i=10;
	i>=2;
	i--){
	try{
	var fl=eval("new ActiveXObject('ShockwaveFlash.ShockwaveFlash."+i+"');
	");
	if(fl){
	f=i+'.0';
	break;
}
}
catch(e){
}
}
}
pgvRealSetCookie("flv="+f);
}
catch(e){
}
return f;
}
function pgvSendInfo(url){
	var img=new Image(1,1);
	img.src=url;
	img.onerror=function(){
	pgvVoid();
}
}
function pgvGenImageUrl(){
	var Url=pvGifUrl;
	Url+=pgvGetDomainInfo();
	Url+=pgvGetRefInfo();
	Url+=pgvGetUserInfo();
	Url+=pgvGetEnvInfo();
	Url+="&vs="+pvVersion;
	return Url;
}
function pgvGetCstm(){
	var dm=pvDoc.domain;
	if(pvCurDomain!=""){
	dm=pvCurDomain;
}
return "&cstm="+dm.replace(/\./g,"_")+"_"+pvCSTM;
}
var pvSpecialGifUrl="http://219.133.51.97/pingd?";
	var pvSpecialTimeSpan=300;
	var pvRealReferInfo=pvNone;
	var pvRealChannel=pvNone;
	var pvCSTM="";
	var pvRealPvid=pvNone;
	function pgvSpecialInfo(){
	var SpecialUrl=pvSpecialGifUrl;
	SpecialUrl+=pgvGetDomainInfo("title");
	SpecialUrl+=pgvGetRefInfo();
	SpecialUrl+=pgvGetUserInfo();
	var now=new Date();
	nowtime=parseInt(now.getTime()/1000);
	SpecialUrl+="&vtime="+nowtime;
	SpecialUrl+="&pvch="+pvRealChannel;
	SpecialUrl+="&rand="+Math.round(Math.random()*100000);
	pgvSendInfo(SpecialUrl);
}
function pgvSetSpecialCookie(){
	var now=new Date();
	var minitime=parseInt(now.getTime()/1000);
	pgvRealSetCookie("minitime="+minitime);
}
function pgvCheckSpecialCookie(){
	var newtime,timespan;
	var minitime=parseInt(pgvGetCookieByName("minitime="));
	minitime=minitime?minitime:0;
	var now=new Date();
	newtime=parseInt(now.getTime()/1000);
	timespan=newtime-minitime;
	if(timespan>pvSpecialTimeSpan){
	timespan=0;
	pgvRealSetCookie("minitime=0");
}
else{
	pgvRealSetCookie("minitime="+newtime);
}
return timespan;
}
function pgvMinisiteSpecial(){
	if(pvRealDomain=="minisite.qq.com"){
	pgvSetSpecialCookie();
}
else if(pvRealDomainToSet=="qq.com"){
	var timespan=pgvCheckSpecialCookie();
	if(pvRealReferInfo!=pvNone){
	pvRealChannel=timespan>0?'MINI':'OTHER';
}
}
pgvSpecialInfo();
}
function pgvMain(pgv_bhv_type){
	try{
	if(pvRepeatCount==1){
	pvRepeatCount=2;
}
else{
	return;
}
var Url=pgvGenImageUrl();
	if(pvCSTM&&pvCSTM!=""){
	Url+=pgvGetCstm();
}
if(pgv_bhv_type&&pgv_bhv_type=="return_url"){
	return Url;
}
Url+="&rand="+Math.round(Math.random()*100000);
	pgvSendInfo(Url);
	if(parseInt(pvRealPvid)%1000==123)pgvMinisiteSpecial();
}
catch(e){
	var v=ScriptEngineMajorVersion()+"."+ScriptEngineMinorVersion();
	var Url=pvSpecialGifUrl+"err="+escape(e.message)+"&jsv="+v+"&url="+escape(pvDoc.URL);
	Url+="&rand="+Math.round(Math.random()*100000);
	pgvSendInfo(Url);
}
}

CSS代码(blueplayer.css):

<!--*{margin:0;padding:0;}
.clear{clear:both;font-size:1px;width:1px;height:1px;visibility:hidden;}
.cWhite,a.cWhite:link,a.cWhite:visited{color:#fff;}
/* ��Ƶ����������Start */
.v_player{margin:0 auto;width:344px;}
/* �����߿� */
.v_top1{float:left;width:12px;height:11px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_top1.gif);}
.v_top2{float:left;width:320px;height:11px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_top2.gif);}
.v_top3{float:right;width:12px;height:11px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_top3.gif);}
/* �м�MediaPlayer�ؼ���ӰƬ��Ϣ */
.v_mid1{float:left;width:12px;height:264px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_border.gif);}
.v_mid2{float:left;width:320px;height:264px;font-size:1px;background-color:#FFF;color:#000;}
/* ͼƬ���� */
#perpic{margin:0 auto;width:320px;height:245px;display:none;}
/* ���������� */
#playerList{margin:0 auto;width:320px;height:245px;display:block;}
/* ӰƬ��Ϣ���� */
.m_info{margin:0 auto;border-top:1px solid #71b2d9;background-color:#BBD2E4;width:320px;height:18px;display:block;}
.m_info #mediaTime{float:right;padding-top:3px;padding-bottom:1px;width:70px;height:12px;color:#FFF;text-align:center;font:normal 12px "����,Arial,Helvetica,sans-serif";}
.m_info #mediaInfo{float:left;padding-left:5px;padding-top:3px;padding-bottom:1px;width:221px;height:12px;color:#FFF;text-align:left;font:normal 12px "����,Arial,Helvetica,sans-serif";}
.v_mid3{float:right;width:12px;height:264px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_border.gif);}
/* ������ */
.v_line{margin:0 auto;width:344px;height:4px;font-size:1px;background-image:url(../mediaplayer/lightblue/m_line.gif);}
/* ���������ư�ť���� */
.left_control{float:left;width:11px;height:55px;background-image:url(../mediaplayer/lightblue/left_control.gif);}
.cnt_control{float:left;width:322px;height:55px;background-image:url(../mediaplayer/lightblue/control_bg.gif);overflow:hidden;}
.cnt_control .btnPlay{float:left;padding-top:9px;padding-bottom:10px;width:34px;height:36px;}
.cnt_control .btnStop{float:left;padding-top:4px;padding-bottom:28px;width:23px;height:23px;}
.cnt_control .btnInfo{float:left;width:209px;height:55px;}
.pbar{margin:0 auto;width:209px;height:32px;overflow:hidden;}
.vloadingleft{float:left;width:18px;height:32px;}
.v_loading{float:left;margin:0;width:141px;height:32px;overflow:hidden;}
.pointer{cursor:pointer;}
.pzonetop{margin:0 auto;height:13px;width:101px;font-size:1px;}
#pZone{margin:0 auto;width:141px;background:url(../mediaplayer/lightblue/loading.gif) left top no-repeat;text-align:left;position:relative;left:0;overflow:hidden;}
#pBox{left:0;top:-1px;overflow:hidden;cursor:pointer;position:relative;z-index:99;}
.btnSound{float:right;padding-top:5px;padding-right:3px;padding-bottom:4px;padding-left:22px;width:23px;height:25px;}
.sbar{float:right;width:52px;height:55px;}
.vzonetop{margin:0 auto;width:52px;height:10px;font-size:1px;}
#vZone{margin:0 auto;width:48px;height:9px;background:url(../mediaplayer/lightblue/soundbg.gif) left top no-repeat;position:relative;left:0;text-align:left;}
#vBox{left:25px;overflow:hidden;cursor:pointer;position:relative;top:0;}
.fullscreen{margin:0 auto;padding-top:4px;padding-right:1px;padding-bottom:9px;padding-left:28px;width:22px;height:23px;}
#v_info{margin:0 auto;padding-top:4px;width:203px;height:12px;font:bold 12px "����,arial,Helvetica,sans-serif";letter-spacing:1px;color:#1172BF;text-align:center;}
.right_control{float:right;width:11px;height:55px;background-image:url(../mediaplayer/lightblue/right_control.gif);}
/* ��Ƶ����������End */
-->

附件:下载该文件资源,减少时间成本(增值服务)