利用MOSS文档库自制一个山寨版mp3在线播放器
前几天突然心血来潮，看到别人做了一个利用文档库实现在线视频播放，我就想，定制一下文档库的下拉菜单，就是下图，来实现mp3的在线播放。
先看一下做完后的效果吧。
定制完后的下拉菜单只有试听这一项，当点击试听后，弹出一个小的播放页面，类似于大家非常熟悉的百度mp3试听，如图：
这个新小页面我一点样式都没加，非常丑，但既然是自己做的，可以任意BT定制，这个在后面有时间的时候我再来美化一下。
首先来看一下怎么来自定义文档库的下拉菜单。这部分内容，最早是参考otec老杜的一篇文章，当时只是想修改一下下拉菜单里的条目名称，这个东西是完全在前台实现的, 并且sharepoint提供了JS接口去修改它，只需要在页面上添加一段JS，通常用一个内容编辑器就可以很容易的做到。
比如如果自定义文档库列表的话, 就放一个Custom_AddDocLibMenuItems方法
如果是普通列表的话, 就放一个Custom_AddListMenuItems方法
举个例子来说:
<script language='javascript'>
function Custom_AddListMenuItems(m, ctx)
{
var menuOption;
strDisplayText="Say Hello";
strAction="javascript:alert('Hello!')";
strImagePath=ctx.imagesPath+"exptitem.gif";
menuOption=CAMOpt(m, strDisplayText, strAction, strImagePath, null, 550);
menuOption.id="ID_Custom";
return true;
}
</< SPAN>script>
这个方法会去掉下面webpart的默认菜单项, 并且添加一个Say Hello菜单项, 点击后alert
CAMOpt是内置的创建菜单项的方法
第二个参数指定名称, 第三个指定一个action(javascript函数), 第三个指定image(没有写"")
第四个指定image的alt属性, 第五个是菜单项的顺序编号
如果Custom_AddListMenuItems返回true, 那么不会创建默认的那些菜单项
如果返回false或者不些return语句, 默认的那些菜单项还在，前段时间有人问怎么将列表的下拉菜单去掉，我就给他一句代码，在Custom_AddListMenuItems里return true就可以了。
接下来是怎样通过JS来取得对应的mp3名字，并传给试听页面以及试听页面的相关处理过程。思路类似于实现单点登陆，首先来创建一个试听页面，这个页面接受一个参数，然后生成一个mp3的绝对路径，并赋值给播放器控件，这样就可以播放mp3了。如果是视频的话，同样也可以用这种方式来实现在线播放。
首先来看一下给定制的下拉菜单绑定处理事件。完整的JS代码如下：
<script language='javascript'>
function Custom_AddDocLibMenuItems(m, ctx)
{
var menuid= m.id.split('_')[0];
var url=document.getElementById(menuid).Url;
var menuOption;
strDisplayText="试听";
strAction="javascript:CreateMp3('"+url+"')";
strImagePath=ctx.imagesPath+"exptitem.gif";
menuOption=CAMOpt(m, strDisplayText, strAction, strImagePath, null, 550);
menuOption.id="ID_Custom";
return true;
}
function CreateMp3(url)
{
var mp3url="/_layouts/mp3.htm?p="+url.split('/')[3];
openpage(mp3url);
}
function openpage(htmlurl)
{
var newwin=window.open(htmlurl,"newWin","toolbar=no,location=no,directories=no,status=no,scrollbars=yes,menubar=no,resizable=no,top=100,left=200,width=400,height=200");
newwin.focus();
return false;
}
</script>
解释一下，首先在Custom_AddDocLibMenuItems中，为“试听”选项绑定了一个事件，strAction="javascript:CreateMp3('"+url+"')";，CreateMp3方法接受一个参数url，即为当前选中的mp3的名城，通过document.getElementById(menuid).Url;来获得，然后在CreateMp3中拼凑形成试听地址，并将这个名称传递给它，这样再调用openpage方法，打开试听页面并适当的修改一下试听窗口的属性，如大小，导航菜单不可见等等。
然后再来看一下试听页面的处理过程。完整的页面代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; CHARSET=utf-8" />
<meta name="Robots" content="NOINDEX, NOFOLLOW" />
<title>MP3试听</title>
<script type="text/javascript">
function getParameter(queryString, parameterName)
{
var parameterName = parameterName + "=";
if (queryString.length > 0) {
begin = queryString.indexOf(parameterName);
if (begin != -1) {
begin += parameterName.length;
end = queryString.indexOf("&", begin);
if (end == -1) {
end = queryString.length;
}
return unescape(queryString.substring(begin, end));
}
return "null";
}
}
function playList_dblClick(){
var queryString = window.location.search.substring(1);
var mp3url='文档库地址'+getParameter(queryString,'p');
MediaPlayer1.detachEvent("PlayStateChange",checkPlayStatus);
MediaPlayer1.fileName=mp3url;
MediaPlayer1.play();
setTimeout('MediaPlayer1.play();MediaPlayer1.attachEvent("PlayStateChange",checkPlayStatus);',1000);
}
function init(){
MediaPlayer1.AutoRewind=false;
MediaPlayer1.AutoStart=true;
MediaPlayer1.SendPlayStateChangeEvents=true;
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="playList_dblClick();">
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<param name="AudioStream" value="-1"/>
<param name="AutoSize" value="-1"/>
<!--是否自动调整播放大小-->
<param name="AutoStart" value="0"/>
<!--是否自动播放-->
<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="ClickToPlay" value="-1"/>
<param name="CursorType" value="0"/>
<param name="CurrentPosition" value="0"/>
<!--当前播放进度 -1 表示不变,0表示开头 单位是秒,比如10表示从第10秒处开始播放,值必须是-1.0或大于等于0-->
<param name="CurrentMarker" value="0"/>
<param name="DisplayBackColor" value="0"/>
<param name="DisplayForeColor" value="16777215"/>
<param name="DisplayMode" value="0"/>
<param name="DisplaySize" value="0"/>
<embed src="-1.mp3" width="286" id="m1" height="225" autostart="0"></embed>
</object>
</body>
</html>
在body的onload事件中，调用playList_dblClick()方法，它会取得传递过来的mp3名称，并通过var mp3url='文档库地址'+getParameter(queryString,'p');这种方式来拼成mp3在文档库中的绝对地址，并赋值给播放器，然后播放，MediaPlayer1.fileName=mp3url;
MediaPlayer1.play();，这样，就可以试听mp3了。
到此为止，山寨版mp3在线播放器就做完了，比较原始，纯粹是闲的。