网页播放技术【好代码】2和3

<html>
<head>
<title>aboutplayer</title>
<style>
body {
overflow:auto;
font-size:12px;
cursor:default;
background-color: #977E4A;
}

#table01 {
font-size:12px;
background-Color:black;
color:white;
text-align:center;
}

#playListTitle {
background-Color:#001122;
color:white;
font-size:12px;
font-weight:bold;
width:100%;
height:16px;
padding:2px;
}

#playList {
width:150px;
height:225px;
margin:0px;
font-size:12px;
background-Color:black;
color:white;
}

#musicList {
width:200px;
border:buttonface 4px groove;
height:80px;
position:absolute;
right:5px;
top:23px;
left: -1px;
}

#musicListTitle {
font-size:13px;
width:100%;
height:20px;
background-Color:#C5FFC5;
padding:3px;
font-weight:bold;
}

#musicList a {
text-decoration:none;
width:100%;
height:20px;
line-height:20px;
font-szie:20px;
line-height:20px;
padding-top:5px;
padding-left:10px;
}

#musicList a:hover {
background-Color:#E5FFE5;
}
.style1 {
color: #006699;
font-weight: bold;
}
.style2 {font-size: 12px}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style4 {font-size: 12px; color: #FFFF33; }
.style7 {font-family: "Times New Roman", Times, serif}
</style>
<script>

function playList_dragOver(){
event.returnValue=false;
}

function playList_dragEnter(){
event.returnValue=false;
event.dataTransfer.dropEffect='link';
}

function addMusic(){
if(event.srcElement.tagName=='A'){
  strTxt=event.srcElement.innerText;
  strURL=event.srcElement.href;
  playList.innerHTML="";
  playList.options[0]=new Option(strTxt,strURL);
  playList.options[0].selected=true;
}
event.returnValue=false;

playList_dblClick();
return(false);
}

function playList_drop(){
strTxt=unescape(event.dataTransfer.getData('Text').split(":")[0]);
strURL=unescape(event.dataTransfer.getData('Text').split(":")[1]);
playList.options[playList.options.length]=new Option(strTxt,strURL);
}

function playList_dblClick(){
MediaPlayer1.detachEvent("PlayStateChange",checkPlayStatus);
MediaPlayer1.fileName=playList.value;
MediaPlayer1.play();
setTimeout('MediaPlayer1.play();MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);',1000);
}

function musicList_dragStart(){
if(event.srcElement.tagName=='A'){
event.dataTransfer.setData('Text',escape(event.srcElement.innerText)+":"+escape(event.srcElement.href));
}else{
return(false);
}
}

function init(){
MediaPlayer1.AutoRewind=false;
MediaPlayer1.AutoStart=true;
MediaPlayer1.SendPlayStateChangeEvents=true;
MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);
}

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for IE 4+////
/////////////////////////////////

var dragapproved=false

function drag_dropie(){
if (dragapproved==true){
document.all.showimage.style.pixelLeft=tempx+event.clientX-iex
document.all.showimage.style.pixelTop=tempy+event.clientY-iey
return false
}
}

function initializedragie(){
iex=event.clientX
iey=event.clientY
tempx=showimage.style.pixelLeft
tempy=showimage.style.pixelTop
dragapproved=true
document.onmousemove=drag_dropie
}

if (document.all){
document.onmouseup=new Function("dragapproved=false")
}

////drag drop functions end here//////

function hidebox(){
if (document.all)
showimage.style.visibility="hidden"
else if (document.layers)
document.showimage.visibility="hide"
}

</script>
<div id="showimage" style="position:absolute; width:500px; left:465px; top:18px; height: 0px;">
<table border="0" width="199" cellspacing="0" cellpadding="0">
<tr>
    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"
    height="36">
      <tr>
        <td width="100%" bgcolor="#C6FFC6" style="padding:4px" onMousedown="initializedragie()"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0" class="style1">
        <div align="left" class="style2">
          <div align="center">用鼠标按着我拖拖看<span class="style7">^o^</span></div>
        </div>
        </layer>
        </ilayer></td>
        <td bgcolor="#00CCFF" style="cursor:hand"><strong><a href="#" onClick="hidebox();return false">×</a></strong></td>
      </tr>
      <tr>
        <td width="100%" style="padding:4px" colspan="2"><p> </p>
          <div id=musicList ondragstart="musicList_dragStart();">
            <div class="style2" id=musicListTitle>All Music</div>
            <span class="style2"><a href="http://www.gyvnet.com/music_new/web/user/usermusic/2947/2005030813201579754.mp3" onclick="addMusic();">麻吉弟弟甜蜜蜜</a><br>
            <a href="http://www.gyvnet.com/music_new/web/user/usermusic/2308/2005063004283371564.mp3" onclick="addMusic();">第一滴泪 - 动力火车</a><br>
            <a href="http://211.90.238.134/blog/upload/music/half.sugar.wma" onclick="addMusic();">半糖主义 - SHE</a><br>
            <a href="http://web.163.sh.cn/~kkyhm/music/3.wma" onclick="addMusic();">发如雪 - 周杰伦</a></span><br>
            <hr>
            <span class="style4">Tips: 把歌曲拖入播放列表<br>
            </span>
              <input type="button" class="style2" onclick="doFull();" value="全屏/ESC返回">
              </div>
          </td>
      </tr>
    </table>
    </td>
</tr>
</table>
</div>
<div id=info></div>
<body>
</html>

<HTML xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
v\:textpath{font-family:楷体_gb2312;font-size:26px;v-text-align:left}
</style>
<body>
<xmp id=xLyric style=display:none>
[ti:请跟我来]
[ar:苏芮&虞戡平]
[al:]
[00:00.00]曲 : 梁弘志
[00:06.34]词 : 梁弘志
[00:16.00]<1-3:3;6:2;7:3>我踩着不变的步伐
[00:22.19]<3:2;6:2;9:2>是为了配合你的到来
[00:28.54]在慌张迟疑的时候
[00:35.25]请跟我来
[00:41.61]我带着梦幻的期待
[00:47.96]是无法按捺的情怀
[00:53.99]在你不注意的时候
[01:00.75]请跟我来
[02:19.49][01:10.00]别说什么
[02:26.39][01:16.28]那是你无法预知的世界
[02:33.94][01:23.51]别说你不用说
[02:39.72][01:29.32]你的眼睛已经告诉了我
[02:52.22][01:42.46]当春雨飘呀飘的飘在
[02:58.54][01:48.41]你滴也滴不完的发梢
[03:04.62][01:54.53]戴着你的水晶珠链
[03:11.60][02:01.36]请跟我来
[03:19.24][02:07.02]www.aboutplayer.com
</xmp>
</body>
</html>
<script>
window.onerror=function(){return false}
start()
function start(){
browser_ini()
timer_ini()
emv_ini()
lrc.setData(oo("xLyric").innerHTML)
lrc.write("歌曲载入中，请耐心等待...","l")
emv.play("mms://218.66.102.192/mp3/2005-01-06/fea30a20-e49f-4ebc-8f25-44cfe4830ca7.wma")
}
function emv_ini(){
var l
window.emv={}
lrc_ini()
l="<div id=bxEmv style=position:absolute;left:180;top:50;width:600;height:460>"
l+="<div style=position:absolute;left:0;top:0;width:600;height:460;></div>"
l+="<div id=bxEmvScreen style=position:absolute;overflow:hidden;left:19;top:26;width:560;height:360;>"
l+="</div>"
l+="</div>"
l+="<object classid=clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95 id=mplayer width=250 height=200 style=display:none></object>"
insHtm(document.body,l)
emv.play=function(url){oo("mplayer").FileName=url;oo("mplayer").Play()}
emv.time=function(){
  var mPos=mplayer.CurrentPosition,n=lrc.i
  var n1,o,len,w,per,n0,n1
  n1=n<lrc.arr.length-1?lrc.arr[n+1].slice(0,"|")*1:9999
  if(n1<mPos){
   lrc.i++
   n++
   if(n==0)
    lrc.write(lrc.arr[n].slice("|"),"l")
   if(n<lrc.arr.length-1)
    lrc.write(lrc.arr[n+1].slice("|"),n%2==1?"l":"r")
  }
  if(n>=0){
   n0=lrc.arr[n].slice(0,"|")
   n1=lrc.arr.length>n+1?lrc.arr[n+1].slice(0,"|"):4
   o=oo("bxCaption_"+(n%2==0?"l":"r")+"_cover")
   len=o.time!=""?o.time*1:n1-n0
   per=(mPos-n0)/len
   for(i=0.001;i<1;i+=0.001){
    per1=lrc.getRealPos(o,i)
    if(per1>=per)
     break
   }
   o.style.width=o.width*i
  }
}
timer.add("emv.time()")
}
function lrc_ini(){
window.lrc={}
lrc.wordPer=function(str,pos){
  return str.slice(0,pos).replace(/[^\x00-\xff]/g," ").length/str.replace(/[^\x00-\xff]/g," ").length
}
lrc.setData=function(str){
  var l,a,i,ad,n,j
  str=str.replace(/\|/g,"").replace(/\r\n/g,"\n")
  str=str.replace(/\[(\d\d)\:(\d\d)\.(\d\d)\]/g,function($0,$1,$2,$3){return ($1*60+$2*1+$3/100)+"|"})
  a=str.split("\n")
  lrc.arr=new Array()
  for(i=0;i<a.length;i++){
   ad=a[i].split("|")
   for(j=1;j<ad.length;j++){
    lrc.arr.add(ad[j-1]+"|"+ad[ad.length-1])
   }
  }
  lrc.i=-1
  sortIndex=0
  sortDir=1
  lrc.arr.sort(sortFoo)
}
lrc.getRealPos=function(obj,pos){
  var a=obj.path,zoom=obj.zoom,pos1=pos*zoom
  var a,i,ad
  for(i=0;i<a.length;i++){
   ad=a[i]
   if(pos<=ad[0])
    continue
   if(pos>ad[0]&&pos<=ad[1])
    pos1+=(zoom*ad[2]-zoom)*(pos-ad[0])
   else{
    pos1+=(zoom*ad[2]-zoom)*(ad[1]-ad[0])
   }

  }
  return pos1
}
lrc.write=function(str,pos){
  var word=str,style=""
  var x,y,l,w,w1,o,a,i,ad
  if(/^\<.+\>/.test(str)){
   word=str.slice(">")
   style=str.slice(1).slice(0,">")
  }
  w=word.replace(/[^\x00-\xff]/g," ").length*13+2
  if(pos=="l"){
   x=40
   y=285
  }
  else{
   x=520-w
   y=315
  }
  l="<div id=bxCaption_"+pos+" style='position:absolute;left:"+x+";top:"+y+";width:"+w+";height:32;overflow:hidden'>"
  l+="<v:curve to=800,1 strokecolor=black strokeweight=3 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="<v:curve to=800,1 strokecolor=white fillcolor=white strokeweight=1 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="</div>"
  l+="<div id=bxCaption_"+pos+"_cover width="+w+" style=position:absolute;left:"+x+";top:"+y+";width:0;height:32;overflow:hidden>"
  l+="<v:curve to=800,1 strokecolor=white strokeweight=3 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="<v:curve to=800,1 strokecolor=blue fillcolor=blue strokeweight=1 style=position:absolute;top:14>"
  l+="<v:path textpathok=t /><v:textpath on=t string='"+word+"' /></v:curve>"
  l+="</div>"
  odel("bxCaption_"+pos)
  odel("bxCaption_"+pos+"_cover")
  insHtm("bxEmvScreen",l)
  o=oo("bxCaption_"+pos+"_cover")
  o.time=style.get("time")
  o.path=new Array()
  len1=1
  a=style.split(";")
  for(i=0;i<a.length;i++){
   if(!/(\d+):(\d+)/.test(a[i]))
    continue
   if(/(\d+)-(\d+):(\d+)/.test(a[i])){
    ad=/(\d+)-(\d+):(\d+)/.exec(a[i])
    ad[0]=lrc.wordPer(word,ad[1]-1)
    ad[1]=lrc.wordPer(word,ad[2]*1)
    ad[2]=ad[3]
   }
   else{
    ad=/(\d+):(.+)/.exec(a[i])
    ad[0]=lrc.wordPer(word,ad[1]-1)
    ad[1]=lrc.wordPer(word,ad[1]*1)
   }
   len1+=(ad[1]-ad[0])*(ad[2]-1)
   o.path.add(ad)
  }
  o.zoom=1/len1
}
}
function browser_ini(){
window.isIE=navigator.userAgent.indexOf("IE")>0
window.isIE5=navigator.userAgent.indexOf("IE 5.0")>0
String.prototype.trim=function(){return this.replace(/(^[\s]*)|([\s]*$)/g,"")}
String.prototype.inc=function(s1,s2){if(s2==null){s2=","};return (s2+this+s2).indexOf(s2+s1+s2)>-1?true:false}
String.prototype._slice="".slice
String.prototype.slice=function(n1,n2){var v,b1=typeof(n1)=="number",b2=typeof(n2)=="number";if(!b1||typeof(n2)=="string"){v=eval("this._slice("+(b1?n1:this.indexOf(n1)+(n2==null?1:0)+(this.indexOf(n1)==-1?this.length:0))+(n2==null?"":(b2?n2:(this.indexOf(n2)==-1?"":","+this.indexOf(n2))))+")")}else{v=isIE5&&n1<0&&n2==null?this._slice(this.length-1):eval("this._slice(n1"+(n2==null?"":","+n2)+")")}return v}
String.prototype.get=function(str,def){if(this.inc(str,";"))return 1;var a=this.match(new RegExp("(^|;)"+str+":[^;]*"));return a==null||str==""?(def==null?"":def):a[0].replace(";","").slice(str.length+1)}
Array.prototype.add=function(key){this[this.length]=key}
window.oo=function(obj){return typeof(obj)=="string"?document.getElementById(obj):obj}
window.insHtm=function(op,html,inEnd){op=oo(op);if(isIE){op.insertAdjacentHTML(inEnd==null?"beforeend":"afterbegin",html)}else{var r=op.ownerDocument.createRange();r.setStartBefore(op);eval("op."+(inEnd==null?"appendChild":"insertBefore")+"(r.createContextualFragment(html),op.firstChild)");}}
window.odel=function(obj){if(oo(obj)!=null){oo(obj).parentNode.removeChild(oo(obj))}}
if(!isIE){
     HTMLElement.prototype.contains=function(node){if(!node)return false;do if(node==this){return true}while(node=node.parentNode){return false}}
  Event.prototype.__defineGetter__("srcElement",function(){var node=this.target;while(node.nodeType!=1){node=node.parentNode}return node})
  Event.prototype.__defineGetter__("toElement",function(){return this.relatedTarget})
}
}
function timer_ini(){
window.timer={}
timer.handle=null
timer.queue=""
timer.i=0
timer.add=function(key){if(!timer.queue.inc(key,";")){timer.queue+=key+";"}}
timer.del=function(key){timer.queue=move.queue.replace(key+";","")}
timer.inv=function(){
  window.clearTimeout(timer.handle)
  eval(timer.queue)
  timer.i++
  timer.handle=window.setTimeout("timer.inv()",10)
}
timer.inv()
}
function sortFoo(v1,v2){
    var s1=v1.split("|")[sortIndex],s2=v2.split("|")[sortIndex]
    if(!isNaN(s1)&&!isNaN(s2)){
  s1*=1
  s2*=1
    }
return (s1==s2?0:(s1>s2?1:-1))*sortDir
}
</script>

posted on 2006-12-19 16:21 mlw2000 阅读(495) 评论(0) 编辑收藏所属分类: JavaScript

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻 Chat2DB C++博客博问管理
相关文章: javascript 异常处理 [转] 下拉列表的设定JS代码网页播放技术【好代码】2和3 网页播放技术【好代码】1 测试正则表达式的工具（来自网上，稍作修改） javascript中String 对象属性和方法 javascript对象定义方法 [转] VML绘图时发现的一个问题（在大量点坐标的情况下中间出现空格） IE中非模式对话框(showModelessDialog)应用 [转] 网页调色板代码『收集』

JAVA FOR FUN

网页播放技术【好代码】2和3

导航

常用链接

留言簿(1)

随笔分类

随笔档案

文章分类

文章档案

相册

搜索

最新评论

阅读排行榜

评论排行榜