论坛首页 → Web前端技术论坛 →

FF & IE下的Real和Wmp播放器

浏览 4626 次
锁定老帖子 主题：FF & IE下的Real和Wmp播放器
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • fuyun
  • 等级: 初级会员
  • 文章: 40
  • 积分: 10
  • 来自: 杭州
   发表时间：2009-01-16   最后修改：2009-01-16
很简单，两个文件，如下：（先贴出，再简单分析） 
<html>
<head><title>Radio Online~Author:Fuyun</title></head>
<script language="javascript" src="radio.js"></SCRIPT>
<body>
<center>
<table>
<tr>
  <td>
    <table cellSpacing="1" width="100%" align="center" bgColor="#c6cfef" border="0">
      <tbody>
        <tr>
          <td class="title1" colspan="2">
            在线广播，电视，MP3，Flash，视频<label style="CURSOR: pointer" onclick="PlayerZoom()">【转为<font color="red">电视视频模式</font>】</label> 
          </td>
        </tr>
        <tr align="center">
          <td width="50%" bgColor="#ffffff" height="90">
            <select id="MediaSelect" style="width: 320px" onchange="return(MediaSelectSubmit(0))" name="MediaSelect">
              <script language="javascript">MediaSelectWrite(0);</script>
            </select> 
            <input onclick="MediaOpenUrl()" type="submit" value="打开网址" name="submit3" />
            <object id="MediaPlayer" height="66" width="400" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" type="application/x-oleobject">
<!--如果为"CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"，则下面的url参数应该改为filename，value值不变——这是不同版本的wmp造成的。参见[url]http://www.w3school.com.cn/media/media_playerref.asp[/url]//-->
              <param NAME="url" value="">
              <param NAME="AutoStart" value="1">
              <param NAME="ShowStatusBar" value="1">
              <param NAME="ShowPositionControls" value="0">
              <embed id="MediaPlayerFF" src="" width="400" height="66" 
              	type="application/x-mplayer2" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701">
<!--将type="application/x-mplayer2"换成type="application/x-mplayer"，在最新版FF下将不可用，关于详细的MIME类型，请参考[url]http://www.w3school.com.cn/media/media_mimeref.asp[/url]//-->
              </embed>
            </object>
          </td>
          <td width="50%" bgColor="#ffffff" height="90">
            <select id="RealSelect" style="width: 320px" onchange="return(RealSelectSubmit(0))" name="RealSelect">
              <script language="javascript">RealSelectWrite(0);</script>
            </select> 
            <input onclick="RealOpenUrl()" type="submit" value="打开网址" name="submit3" />
            <object id="RealPlayer" height="66" width="400" classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA">
              <param NAME="autostart" value="true">
              <param NAME="controls" value="ControlPanel,StatusBar">
              <embed id="RealPlayerFF" src="" width="400" height="66" autostart="true" 
              	type="audio/x-pn-realaudio-plugin">
              </embed>
            </object>
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>
</table>
</center>
</body>
</html>

//文件名：radio.js
var g_MediaList = [
  ["Please choose one...", ""],
  ["音乐之声", "mms://mms.cnr.cn/live3"],
  ["长沙音乐频道", "mms://real.rednet.cn/1061"],
  ["猫扑网络电台", "mms://ting.mop.com/mopradio"],
  ["青檬网络电台", "mms://pub.qmoon.net:8009/audio"],
  ["QQ电台综艺之声", "http://qr.fm.qq.com/qqradio?qqradio"],
  ["银河网络电台", "http://union.itlearner.com/radio/asx/iwant.asx"],
  ["45度网络电台", "mms://szlive.45doo.com/live"],
  ["中国国际广播电台", "mms://living.chinabroadcast.cn/inet"],
  ["----广播(港澳台)----", ""],
  ["澳门电台", "mms://202.175.80.10/LiveAudio"],

  ["----电视(大陆)----", ""],
  ["CCTV-1", "mms://202.102.249.220/live_tv01"],
  ["云南卫视", "mms://202.102.249.220/live_tv04"],
  ["XINHUATV", "http://202.109.80.136/channel3"],
  ["南京新闻综合频道", "mms://live.njbg.com.cn:88/NJTV01"],
  ["南京影视频道", "mms://live.njbg.com.cn:88/NJTV02"],
  ["南京文体频道", "mms://live.njbg.com.cn:88/NJTV03"],
  ["南京生活频道", "mms://live.njbg.com.cn:88/NJTV04"],
  ["南京教科频道", "mms://live.njbg.com.cn:88/NJTV05"],
  ["南京信息频道", "http://live.njbg.com.cn:88/NJTV06"],
  ["南京少儿频道", "mms://live.njbg.com.cn:88/NJTV07"],
  ["南京18频道", "mms://live.njbg.com.cn:88/NJTV18"],
       
  ["----音乐视频----",  ""],
  ["艳女舞曲", "http://video-v1.9you.com/421b47ffd946ca083b65cd668c6b17e6/flv/u/x/uxeo6pywy.flv"],
  ["伤感女孩", "http://shiyang.ucoz.com/mp3/duobideai.mp3"],

  ["----电视(国外)----", ""],
  ["美国音乐台", "mms://stream.nwez.net/nwez3"],
  ["法国BFM TV", "mms://vipmms9.yacast.net/bfm_bfmtv"],
  ["Discovery探索频道", "mms://media-wm.cac.washington.edu/ResearchTV%20Live%20(LAN)"],
  ["加拿大综合电视台", "http://video.cpac.ca/CPAC1E/.asf"],
  ["韩国TBC频道", "mms://203.251.80.180/tbc_tv"],
  ["日本LFX频道", "mms://bbn-lf.stream.ne.jp/lfx2"],
  ["瑞士TELEM", "mms://wms01.green.ch/telem1"]
];

var g_RealList = [
  ["Please choose one...", ""],
  ["中央人民广播电台一套", "rtsp://211.89.225.1:554/encoder/cnr1"],
  ["中央人民广播电台二套", "rtsp://211.89.225.1:554/encoder/cnr2"],
  ["中央人民广播电台三套", "rtsp://211.89.225.1:554/encoder/cnr3"],
  ["北京音乐台", "http://www.bmr.com.cn/script/live.ram"],
  ["重庆新闻台", "rtsp://218.201.40.221/encoder/live.rm"],
  ["重庆音乐台", "rtsp://218.201.40.221/encoder/music.rm"],
  ["宁波新闻频道", "rtsp://real.nbradio.com/encoder/xwpd.rm"],
  ["宁波音乐之声", "rtsp://broadcast.nbradio.com/encoder/jkzs.rm"],
  ["成都飞跃调频电台", "rtsp://61.157.96.231:554/broadcast/cd/broadcast/djok.rm"],
  ["成都电台新闻广播", "rtsp://61.157.96.231:554/broadcast/cd/broadcast/1.rm"],
  ["21CN网络电台", "rtsp://radio.21cn.com/id/live1.smil"],
  ["----广播(国外)----", ""],
  ["香港电台普通话台", "http://www.rthk.org.hk/live6.ram"],
  ["法国国际广播电台", "http://www.tv-radio.com/ondemand/rfi/mere/mandarin/info/mandarin_0930-1030-20k.ram"],
  ["日本国际广播电台(NHK)", "http://www.nhk.or.jp/rj/ram/en/chinese.ram"],
  ["美国之音（英语）", "rtsp://a1702.l211048984.c2110.g.lr.akamaistream.net:554/live/D/1702/2110/v0001/reflector:48984"],
  ["美国之音（中文）", "rtsp://a1702.l211020409.c2110.g.lr.akamaistream.net:554/live/D/1702/2110/v0001/reflector:23641"],
  ["BBC News Summary", "rtsp://rmv7.bbc.net.uk/worldservice/summary.rm"],
  ["BBC World Service (Live)", "http://www.bbc.co.uk/worldservice/ram/live_infent.ram"],
  ["BBC音乐站", "http://www.bbc.co.uk/radio1/realaudio/media/r1livev7.ram"],
  ["BBC（中文）", "rtsp://rmv8.bbc.net.uk/chinese/ch_hold_anno.ra"],
  ["BBC ASIAN NETWORK", "http://www.bbc.co.uk/asiannetwork/rams/asiannetwork.ram"],
  ["ABC News Radio", "http://www.abc.net.au/streaming/newsradio.ram"],
  ["WRN CBC", "http://www.wrn.org/audio/rnz_eng.ram"],
  ["----电视(国外)----", ""],
  ["美国NASA频道", "http://www.nasa.gov/ram/35037main_portal.ram"]
];

var g_MediaListEn = [
  ["Please choose one...", ""],
  ["America Music", "mms://stream.nwez.net/nwez3"],
  ["France BFM TV", "mms://vipmms9.yacast.net/bfm_bfmtv"],
  ["Discovery Channel", "mms://media-wm.cac.washington.edu/ResearchTV%20Live%20(LAN)"],
  ["Canada TV", "http://video.cpac.ca/CPAC1E/.asf"],
  ["Korea TBC", "mms://203.251.80.180/tbc_tv"],
  ["Japan LFX", "mms://bbn-lf.stream.ne.jp/lfx2"],
  ["Switzerland TELEM", "mms://wms01.green.ch/telem1"],
  ["----MP3-Video----", ""],
  ["MP3-A place nearby-Lene Marlin", "http://www.ell.com.cn/ejsound/jre061107.mp3"],
  ["Flash-Fishing", "http://218.87.253.164:8088/tfs92006/upload_swf/ftp/20060516/6.swf"]
];

var g_RealListEn = [
  ["Please choose one...", ""],
  ["BBC News Summary", "rtsp://rmv7.bbc.net.uk/worldservice/summary.rm"],
  ["BBC World Service (Live)", "http://www.bbc.co.uk/worldservice/ram/live_infent.ram"],
  ["BBC Music", "http://www.bbc.co.uk/radio1/realaudio/media/r1livev7.ram"],
  ["BBC ASIAN NETWORK", "http://www.bbc.co.uk/asiannetwork/rams/asiannetwork.ram"],
  ["VOA News Now", "rtsp://a1702.l211048984.c2110.g.lr.akamaistream.net:554/live/D/1702/2110/v0001/reflector:48984"],
  ["ABC News Radio", "http://www.abc.net.au/streaming/newsradio.ram"],
  ["WRN CBC", "http://www.wrn.org/audio/rnz_eng.ram"],
  ["----TV----", ""],
  ["America NASA Channel", "http://www.nasa.gov/ram/35037main_portal.ram"]
];
function MediaSelectSubmit(nType){
  var List = (nType == 0 ? g_MediaList : g_MediaListEn);
  //alert(navigator.appName);
  var MediaPlayer = document.getElementById("MediaPlayer");
//目前仍可直接使用id进行访问（FF和IE均可），但w3c推荐使用decument.getElementById()
  var MediaSelect = document.getElementById("MediaSelect");
  if(navigator.appName == "Netscape"){
  	MediaPlayer = document.getElementById("MediaPlayerFF");
  	MediaPlayer.controls.stop();
  	MediaPlayer.src = List[MediaSelect.value][1];
  	MediaPlayer.controls.play();
  }
  else{
  	MediaPlayer.controls.stop();
//旧版本的wmp，调用方式为MediaPlayer.Stop()等，同时还有open()方法（wmp11好像不支持open()）
  	MediaPlayer.URL = List[MediaSelect.value][1];
  	MediaPlayer.controls.play();
  }
  MediaPlayer.focus();
}

function MediaSelectWrite(nType){
  var List = (nType == 0 ? g_MediaList : g_MediaListEn);
  var nLen = List.length - 1;
  for (var i = 0; i <= nLen; i++){
    document.write("<option value=",i,">",List[ i ][0],"</option>");
  }
}

function RealSelectSubmit(nType){
  var List = (nType == 0 ? g_RealList : g_RealListEn);
  var RealPlayer = document.getElementById("RealPlayer");
  var RealSelect = document.getElementById("RealSelect");
  if(navigator.appName == "Netscape"){
  	RealPlayer = document.getElementById("RealPlayerFF");
  	RealPlayer.DoStop();
  	RealPlayer.SetSource(List[RealSelect.value][1]);
  	RealPlayer.DoPlay();
  }
  else{
  	RealPlayer.DoStop();
  	RealPlayer.SetSource(List[RealSelect.value][1]);
  	RealPlayer.DoPlay();
  }
  RealPlayer.focus();
}

function RealSelectWrite(nType){
  var List = (nType == 0 ? g_RealList : g_RealListEn);
  var nLen = List.length - 1;
  for (var i = 0; i <= nLen; i++){
    document.write("<option value=",i,">",List[ i ][0],"</option>");
  }
}

function MediaOpenUrl(){
  var strUrl = prompt("","http://");
  if (strUrl.length < 1)
    return;
  var MediaPlayer = document.getElementById("MediaPlayer");
  if(navigator.appName == "Netscape"){
  	MediaPlayer = document.getElementById("MediaPlayerFF");
  }
  MediaPlayer.controls.stop();
  if(navigator.appName == "Netscape"){
    MediaPlayer.src = strUrl;
  }
  else{
    MediaPlayer.URL = strUrl;
  }
  MediaPlayer.controls.play();
}

function RealOpenUrl(){
  var strUrl = prompt("","http://");
  if (strUrl.length < 1)
    return;
  var RealPlayer = document.getElementById("RealPlayer");
  if(navigator.appName == "Netscape"){
  	RealPlayer = document.getElementById("RealPlayerFF");
  }
  RealPlayer.DoStop();
  RealPlayer.SetSource(strUrl);
  RealPlayer.DoPlay();
}

function PlayerZoom(){
  var MediaPlayer = document.getElementById("MediaPlayer");
  var RealPlayer = document.getElementById("RealPlayer");
  if(navigator.appName == "Netscape"){
  	MediaPlayer = document.getElementById("MediaPlayerFF");
  	RealPlayer = document.getElementById("RealPlayerFF");
    if (MediaPlayer.height<100){
      RealPlayer.controls = "ImageWindow,ControlPanel,StatusBar";
//      MediaPlayer.SetShowStatusBar(true);
//      MediaPlayer.SetShowControls(true);
//      MediaPlayer.SetShowDisplay(true);
      MediaPlayer.height = RealPlayer.height = (MediaPlayer.width*0.75 + 66);//366
    }
    else{
      RealPlayer.controls = "ControlPanel,StatusBar";
      MediaPlayer.height = RealPlayer.height = 66;
    }
  }
  else{
    if (MediaPlayer.height<100){
      RealPlayer.controls = "ImageWindow,ControlPanel,StatusBar";
      MediaPlayer.height = RealPlayer.height = (MediaPlayer.width*0.75 + 66);//366
    }
    else{
      RealPlayer.controls = "ControlPanel,StatusBar";
      MediaPlayer.height = RealPlayer.height = 66;
    }
  }
}

    程序比较简单，就没有添加注释了。在FF3.0.5和IE8下测试通过，其中，在FF下，Real的电视视频模式还不能正确显示视频窗口（估计，仍旧是兼容性的问题，在google下尚未搜索到解决的方案）。其余情况，均无bug，可正常使用。
    本文，仅起抛砖引玉之用，在探讨js在FF和IE下的兼容性和有兼容性开发需求的问题上，做一些初步的研究。
    可以看到，对于wmp和real，在IE和FF下的各种属性、行为、使用方式等，区别还是很大的；另外，新旧版本不同的wmp和real，也会导致兼容性的差错，从而影响开发的难度。
    要从最大范围上做到兼容，实为一件难事，或许根本就不现实，在力求遵循W3C标准的同时，还应根据不同的具体需求进行灵活的“放宽”条件。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics