关于supesite系统视频播放功能的分析

最近同事在做一个系统的时候想用到类似supesite6中视频播放的效果，就是页面可以放多个视频，但是点击后才能播放，同时又能再次隐藏。

分析发现，当我们发布一篇含有视频的新闻时，源文件里显示如下效果：
[code]
<div id="articlebody">   
<P><BR>视频: <KBD class=showvideo title=mms://media.xinhuanet.com/media2/fazhishehui/090614173218_yanyan_14.wmv>aaaaaaaa</KBD><BR></P>   
<P> </P>   
<P><BR>视频: <KBD class=showvideo title=mms://media.xinhuanet.com/media2/fazhishehui/090614173218_yanyan_14.wmv>bbbbbbbbbb</KBD><BR><BR></P>
</div>   
[/code]

但是直接从代码上分析怎么会产生那种效果呢？答案就出在class=showvideo里，我们可以先在template/css/style.css里找到showvideo的样式如下：

[code]
#articlebody kbd.showvideo{     
    font: 1em Arial, Helvetica, sans-serif;     
    cursor: pointer;     
   text-decoration: underline;     
}   
[/code]

还有一个就是最关键的地方： addMediaAction('articlebody');这个JS函数的用途就是将articlebody容器里的一些方法赋予一些动作。接着找到include/js/common.js，里面有如下的代码是控制这个效果的。

[code]
function getbyid(id) {
if (document.getElementById) {
  return document.getElementById(id);
} else if (document.all) {
  return document.all[id];
} else if (document.layers) {
  return document.layers[id];
} else {
  return null;
}
}
//显示隐藏媒体
function addMediaAction(div) {
var thediv = getbyid(div);
if(thediv) {
  var medias = thediv.getElementsByTagName('kbd');
  if(medias) {
   for (i=0;i<medias.length;i++) {
    if(medias.className=='showvideo' || medias.className=='showflash'|| medias.className=='showreal') {
     medias.onclick = function() {showmedia(this,400,400)};
    }
   }
  }
}
}
function showmedia(Obj, mWidth, mHeight) {
var mediaStr, smFile;
if ( Obj.tagName.toLowerCase()=='a' ) { smFile = Obj.href; } else { smFile = Obj.title; }
var smFileType = Obj.className.toLowerCase();
switch(smFileType){
  case "showflash":
   mediaStr="<p style='text-align: right; margin: 0.3em 0; width: 520px;'>[<a href='"+smFile+"' target='_blank'>全屏观看</a>]</p><object codeBase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='520' height='390'><param name='movie' value='"+smFile+"'><param name='quality' value='high'><param name='AllowScriptAccess' value='never'><embed src='"+smFile+"' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='520' height='390'></embed></OBJECT>";
   break;
  case "showvideo":
   mediaStr="<object width='520' classid='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'><param name='url' value='"+smFile+"' /><embed width='520' type='application/x-mplayer2' src='"+smFile+"'></embed></object>";
   break;
  case "showreal":
   mediaStr="<object classid='clsid:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA' width='520' height='390' id='RealMoviePlayer' border='0'><param name='_ExtentX' value='13229'><param name='_ExtentY' value='1058'><param name='controls' value='ImageWindow,controlpanel'><param name='AUTOSTART' value='1'><param name='CONSOLE' value='_master'><param name='SRC' value='"+smFile+"'><EMBED SRC='"+smFile+"' WIDTH='520' type='audio/x-pn-realaudio-plugin'  HEIGHT='390' NOJAVA='true' CONTROLS='ImageWindow,controlpanel' AUTOSTART='true' REGION='newsregion' CONSOLE='one'></EMBED></object>";
}

var mediaDiv = document.getElementById(escape(smFile.toLowerCase()));

if (mediaDiv) {
  Obj.parentNode.removeChild(mediaDiv);
} else {
  mediaDiv = document.createElement("div");
  mediaDiv.style.cssText = "text-align:center;text-indent:0";
  mediaDiv.id = escape(smFile.toLowerCase());
  mediaDiv.innerHTML = mediaStr;
  Obj.parentNode.insertBefore(mediaDiv,Obj.nextSibling);
}
return false;
}
[/code]

从上面我们可以看出，当系统运行addMediaAction('articlebody'); 时，首先JS会循环articlebody容器内的所有以KBD开头的语句，再根据视频播放的模式不同调用不同的方法.播放模式包含showflash，showvideo，showreal。然后开始调用showmedia函数，从 if ( Obj.tagName.toLowerCase()=='a' ) { smFile = Obj.href; } else { smFile = Obj.title; }这一行我们就可以看出来，当我们点击视频标题（如aaaaaaaaaaa）的时候，JS会通过点击的对象获取title(mms://media.xinhuanet.com/media2 ... 73218_yanyan_14.wmv)作为视频播放的地址，串接出视频播放器代码并创建播放容器显示出来。反之则将播放容器通过removeChild移除。  
简单分析后，我们完全可以通过这些代码组出我们自己需要的东西来，用到哪个地方都可以，如果大家想播放wmv格式的视频，请选用showvideo模式，播放rmvb格式的选用showreal模式。下面提供一个简单的页面供大家分析！
（上面写的东西如有错误，请大家帮忙指正，谢谢！）

谢谢啦

  从心支持你