您的位置：首页 > Web前端 > JavaScript

javascript 播放器效果(2)

2009-03-26 11:26 387 查看
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="music.aspx.cs" Inherits="Member_music" %>

<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

   <title>轻松一刻</title>
<style>
body {
        overflow:auto;
        font-size:12px;
        cursor:default;
  background-color:#E6F4FA;
}
#table01 {
        padding-top:120px;
        font-size:12px;
        background:#C1D1F0 url(images/pl_bg.jpg) repeat-x;
        color:white;
        text-align:center;
}
#playListTitle {
        background-Color:#82ADFF;
        color:white;
        font-size:12px;
        font-weight:bold;
        width:100%;
        height:16px;
        padding:2px;
}
#playList {
        width:150px;
        height:286px;
        margin:0px;
        font-size:12px;
        background-Color:#82ADFF;
        color:white;
}
#musicList {
        width:200px;
        border:solid 4px #C1D1F0;
        height:303px;
        position:absolute;
        right:14px;
        top:21px;
  font-size:12px;
}
#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-size:12px;
        line-height:20px;
        padding-top:5px;
        padding-left:10px;
}
#musicList a:hover {
        background-Color:#E5FFE5;
}
</style>
<script language="javascript" type="text/javascript">
var $=function(objid){
 return document.getElementById(objid);
}
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_keyDown(){
        if(event.keyCode==46){
                try{
                        $("playList").options[$("playList").options.selectedIndex].outerHTML="";
                }catch(e){}
                return(false);
        }
        if(event.keyCode==13){
                playList_dblClick();
                return(false);
        }
}

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=false;
        $("MediaPlayer1").attachEvent("PlayStateChange",checkPlayStatus);
}

function checkPlayStatus(oldState,newState){
        try{
                if($("MediaPlayer1").PlayState==0){
                        $("MediaPlayer1").detachEvent("PlayStateChange",checkPlayStatus);
                        $("MediaPlayer1").stop();
                        if($("playList").options.selectedIndex<$("playList").options.length-1){
                                $("playList").options[$("playList").options.selectedIndex+1].selected=true;
                        }else{
                                $("playList").options[0].selected=true;
                        }
                        $("MediaPlayer1").fileName=$("playList").value;
                        $("MediaPlayer1").play();
                        setTimeout('$("MediaPlayer1").play();$("MediaPlayer1").attachEvent("PlayStateChange",checkPlayStatus);',1000);
                }
        }catch(e){}
}
</script>

</head>
<body onLoad="init();">
    <form id="form1" runat="server">
    <table id="table01" style="margin-top:20px;margin-left:15px;">
        <tr>
                <td>
                        <object  classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="320" height="306" STANDBY="Loading Windows Media Player components..." type = "application/x-oleobject" volume="100" loop="true"  showstatusbar="1"style="filter:Alpha(opacity=10,finishOpacity=100,style=3)">
                                <param name="AudioStream" value="-1">
                                <param name="AutoSize" value="-1">
                                <!--是否自动调整播放大小-->
                                <param name="AutoStart" value="1">
                                <!--是否自动播放-->
                                <param name="AnimationAtStart" value="-1">
                                <param name="AllowScan" value="-1">
                                <param name="AllowChangeDisplaySize" value="-1">
                                <param name="AutoRewind" value="0">
                                <param name="Balance" value="0">
                                <!--左右声道平衡,最左-9640,最右9640-->
                                <param name="BaseURL" value>
                                <param name="BufferingTime" value="15">
                                <!--缓冲时间-->
                                <param name="CaptioningID" value>
                                <param name="ClickToPlay" value="-1">
                                <param name="CursorType" value="0">
                                <param name="CurrentPosition" value="0">
        <param name="Appearance value="0 value="">
                                <!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
                                <param name="CurrentMarker" value="0">
                                <param name="DefaultFrame" value>
                                <param name="DisplayBackColor" value="0">
                                <param name="DisplayForeColor" value="16777215">
                                <param name="DisplayMode" value="0">
                                <param name="DisplaySize" value="0">
                                <!--视频1-50%, 0-100%, 2-200%,3-全屏 其它的值作0处理,小数则采用四舍五入然后按前的处理-->
                                <param name="Enabled" value="-1">
                                <param name="EnableContextMenu" value="-1">
                                <!--是否用右键弹出菜单控制-->
                                <param name="EnablePositionControls" value="-1">
                                <param name="EnableFullScreenControls" value="-1">
                                <param name="EnableTracker" value="-1">
                                <!--是否允许拉动播放进度条到任意地方播放-->
                                <param name="Filename" value="" valuetype="ref">
                                <param name="InvokeURLs" value="-1">
                                <param name="Language" value="-1">
                                <param name="Mute" value="0">
                                <!--是否静音-->
                                <param name="PlayCount" value="1">
                                <!--重复播放次数,0为始终重复-->
                                <param name="PreviewMode" value="-1">
                                <param name="Rate" value="1">
                                <!--播放速度1.0-2.0倍的速度播放-->
                                <param name="SAMILang" value>
                                <param name="SAMIStyle" value>
                                <param name="SAMIFileName" value>
                                <!--选择同时播放(伴音)的歌曲-->
                                <param name="SelectionStart" value="-1">
                                <param name="SelectionEnd" value="-1">
                                <param name="SendOpenStateChangeEvents" value="-1">
                                <param name="SendWarningEvents" value="-1">
                                <param name="SendErrorEvents" value="-1">
                                <param name="SendKeyboardEvents" value="0">
                                <param name="SendMouseClickEvents" value="0">
                                <param name="SendMouseMoveEvents" value="0">
                                <param name="SendPlayStateChangeEvents" value="-1">
                                <param name="ShowCaptioning" value="0">
                                <!--是否显示字幕,为一块黑色,下面会有一大块黑色,一般不显示-->
                                <param name="ShowControls" value="-1">
                                <!--是否显示控制,比如播放,停止,暂停-->
                                <param name="ShowAudioControls" value="-1">
                                <!--是否显示音量控制-->
                                <param name="ShowDisplay" value="0">
                                <!--显示节目信息,比如版权等-->
                                <param name="ShowGotoBar" value="0">
                                <!--一条框,在下面,有往下箭头-->
                                <param name="ShowPositionControls" value="-1">
                                <!--是否显示往前往后及列表,如果显示一般也都是灰色不可控制-->
                                <param name="ShowStatusBar" value="-1">
                                <!--当前播放信息,显示是否正在播放,及总播放时间和当前播放到的时间-->
                                <param name="ShowTracker" value="-1">
                                <!--是否显示当前播放跟踪条,即当前的播放进度条-->
                                <param name="TransparentAtStart" value="-1">
                                <param name="VideoBorderWidth" value="0">
                                <!--显示部的宽部,如果小于视频宽,则最小为视频宽,或者加大到指定值,并自动加大高度.此改变只改变四周的黑框大小,不改变视频大小-->
                                <param name="VideoBorderColor" value="0">
                                <!--显示黑色框的颜色, 为RGB值,比如ffff00为黄色-->
                                <param name="VideoBorder3D" value="0">
                                <param name="Volume" value="0">
                                <!--音量大小,负值表示是当前音量的减值,值自动会取绝对值,最大为0,最小为-9640,最大0-->
                                <param name="WindowlessVideo" value="0">
                                <!--如果是0可以允许全屏,否则只能在窗口中查看-->
                        </object>
                </td>
                <td>
                        <div id=playListTitle>播放列表:</div>
                        <select id="playList" size=2 ondragover="playList_dragOver();" ondragenter="playList_dragEnter();"
                         ondrop="playList_drop();" onkeydown="playList_keyDown();" ondblclick="playList_dblClick();">
                        </select>
                </td>
        </tr>
</table>

<div id="musicList"><!-- ondragstart="musicList_dragStart();"-->
<div id="musicListTitle">歌曲清单</div>
<div style="height:240px;overflow-y:auto;margin-bottom:0px;" ondragstart="musicList_dragStart();">
<%=strsongslist%>
</div>
<hr>
Tips: 把歌曲拖入播放列表
</div>
    </form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript function xhtml server table html
相关文章推荐
新的分享
章节导航