supesite系统视频播放功能的分析及设置默认打开页面播放

最近做的一个php项目需求中有视频这个频道，于是研究了一下supesite,不过它是在资讯中可以插入多个视频，点击后才能播放，同时又能再次隐藏。于是看了一下代码.记录如下:

分析发现，当我们发布一篇含有视频的新闻时，在资讯查看页面(news.view.html.php)源文件里显示如下效果：

<div id="article_body">
 
<P>百县视频资讯测试喽百县视频资讯测试喽</P>
<P><BR>Flash: <KBD class=showflash title=http://player.youku.com/player.php/sid/XMTM4OTAzNjUy/v.swf>http://player.youku.com/player.php/sid/XMTM4OTAzNjUy/v.swf</KBD><BR></P></div>
</div> 

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

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

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

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[i].className=='showvideo' || medias[i].className=='showflash'|| medias[i].className=='showreal') {
     medias[i].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;
}

从上面我们可以看出，当系统运行addMediaAction('articlebody'); 时，首先JS会循环articlebody容器内的所有以KBD开头的语句，再根据视频播放的模式不同调用不同的方法.播放模式包含showflash，showvideo，showreal。然后开始调用showmedia函数，从 if ( Obj.tagName.toLowerCase()=='a' ) { smFile = Obj.href; } else { smFile = Obj.title; }这一行我们就可以看出来，当我们点击视频标题（如aaaaaaaaaaa）的时候，JS会通过点击的对象获取title(http://player.youku.com/player.php/sid/XMTM4OTAzNjUy/v.swf)作为视频播放的地址，串接出视频播放器代码并创建播放容器显示出来。反之则将播放容器通过removeChild移除。


*如果想让插入的视频或 FLASH 直接播放，下面的修改则可以设置为默认直接播放。

将下面这段：

//显示隐藏媒体
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[i].className=='showvideo' || medias[i].className=='showflash'|| medias[i].className=='showreal') { 
    medias[i].onclick = function() {showmedia(this,400,400)};    }   
}  
} 
}
}



修改为
//显示隐藏媒体
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[i].className=='showvideo' || medias[i].className=='showflash'|| medias[i].className=='showreal') {
     medias[i].onclick = function() {
       showmedia(this,400,400)
    };    
       showmedia(medias[i],400,400);    
   }   
   }  
  } 
}
}

也就是在for循环中加上showmedia(medias[i],400,400);这句调用就可以了~!

希望能帮助到需要的朋友~~!