[转载]利用MOSS文档库自制一个山寨版mp3在线播放器

最新推荐文章于 2024-11-10 15:10:09 发布

weixin_30648963

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量82

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/chendianhong/archive/2009/10/23/1588608.html

版权

本文转载自“利用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 οnlοad="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"/>

<param name="BaseURL" value>
<param name="BufferingTime" value="15"/>

<param name="ClickToPlay" value="-1"/>
<param name="CursorType" value="0"/>
<param name="CurrentPosition" value="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在线播放器就做完了，比较原始，纯粹是闲的。