js操作视频控件

来源：互联网发布：mac磁盘工具急救编辑：程序博客网时间：2024/06/05 00:21

最近学了js操作视频控件，开始问题很多，通过艰苦的研究终于有了初步的成绩！

js操作视频控件，与浏览器，ActiveX版本关系紧密，我主要是用了Windows Media Player控件，操作不同格式的视频，以及不同版本的WMP，其操作方法都是很不一样的！

js主要是通过document创建object来操作视频空间！html直接用object标签来操作，其实质都是用的HTML DOM 的object操作，HTML DOM 定义了访问和操作HTML文档的标准方法！。。。详细见http://www.w3school.com.cn/index.html

现在主要说明，不同版本的视频控件的操作！

创建不同格式（或者版本的视频控件）就是指定object中的classid为相应的标识！当然不同的classid所对应的属性都是不一样的，这个需要查阅先关说明！我用的是WMP，所以直接在msdn上找到相应的说明！

player类的用法以及WMP相关资料见：http://msdn.microsoft.com/en-us/library/aa139760.aspx

document的相关资料：http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html

下面是自己写的一个测试例子：WMP7 ，IE7环境下的可以播放不同类型的视频，音频文件：

<html>
<head>
<meta http-equiv = "content-type" content = "text/html ; charset = GB2312"/>
<title>通用媒体播放器</title>

<div id = "playBack" align="center">

    </div>
      <p>输入播放的文件</p>
<ul>
    <li>输入文件：<input id ="fileURL" type="file" value="浏览"/>  
    <input type = button onclick = "doPlay()" value = "开始播放"/></li>
<br>
<br>
<br>
<li><a href = "javascript:doPlay();">"*.mp3"音乐文件(Windows Media Player)</a></li>
<br>
<br>
<li><a href = "javascript:doPlay();">"*.rm"流媒体文件(Realone)</a></li>
<br>
<br>
<li><a href = "javascript:doPlay();">Flash动画文件</a></li>

</ul>
  <TABLE height="100" width="250" border="3" bordercolor="blue" align="center" style="">
<TR align="center">
    <TD bgcolor="white">
    播放列表~~控制台
      <SELECT ID="CCLang" onClick="Player.closedCaption.SAMILang = value"></SELECT>
      <SELECT ID="CCStyle" onClick="Player.closedCaption.SAMIStyle = value"></SELECT>
    </TD>
</TR>
<TR height="75">
    <TD bgcolor="blue">
      <DIV id="captions"></DIV>
    </TD>
</TR>
</TABLE>
<script type="text/javascript">
  //在全局变量中保存不同媒体控件的CLSID
  var rmID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA";//real one 的媒体播放控件的“类标志”
  var wmID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" //windows media player
  var swfID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000";//flash
  //保存播放控件对象
  var myPlayer;
  var fPath;


  /////创建播放器~~容器
  function createVidieoObject()
  {
    if(myPlayer)///////清空原有的播放器
    {
   document.getElementById("theTurePlayerID").outerHTML = "";
    }
          //建立播放器
          myPlayer = document.createElement("object");
          myPlayer.width = "100%";
          myPlayer.height = "100%";
   // myPlayer.style.display = "none";
    myPlayer.id = "theTurePlayerID";
          //将播放器放入文档中
    var getResult = document.getElementById("playBack").appendChild(myPlayer);
          if(getResult && myPlayer)
            return(true);
            else
                return(false);
        }

  //////创建Windows media player
        function createWinMedia()
  {
    if(myPlayer)//////先创建全局对象
          {
            //myPlayer.classid = wmID;
            //myPlayer.URL = fPath;
            myPlayer.setAttribute("classid",wmID) ;
   myPlayer.setAttribute("url",fPath);
   myPlayer.setAttribute("stretchToFit","1");
   myPlayer.setAttribute("volume","50");
   myPlayer.setAttribute("fullScreen","0");
          }
          else
          {
                createVidieoObject();
                createWinMedia();
          }
        }

        //////////创建realPlayer
        function createRealPlayer()
        {

    myPlayer.classid = rmID;
    with(myPlayer)
      {
     AUTOSTART = "-1";
                    PREFETCH = "0";
                    //CONTROLS = "ControlPanel";
     LOOP = "0";
                    NUMLOOP = "0";
                    CONSOLE = "Video";

                    _ExtentX = "12118";_ExtentY = "8573";
     SHUFFLE = "0";
                    CENTER = 0;
                    MAINTAINASPECT = 0;

                    BACKGROUNDCOLOR = "#000000";

     NOLABELS = "0";
                  }
    myPlayer.Source = fPath;
    myPlayer.DoPlay();
        }
    function doPlay(filePath){
  //装入媒体~~路径
    if(!filePath)
    {
   fPath = document.getElementById("fileURL").value;
  }
        else
        {
            fPath = filePath;
        }
          ///成功装入
  if(fPath == ""|| fPath == null)
    {
   return(false);
    }


         if(!createVidieoObject())////创建播放器
            return(false);

         //得到文件后缀名
  fType = fPath.substring(fPath.lastIndexOf(".")+1).toLowerCase();

  switch(fType)//////根据文件~~选择播放器
    {
   case "rm":
            case "rmvb":
                createRealPlayer();
    break;
   case "swf":
    myPlayer.classid = swfID;
    mYPlayer.DoPlay();
    break;
   default :
        createWinMedia();
            }
  setTimeout("myPlayer.syle.display='';",1000);

}
    //doPlay('zhu1.wma') ;
</script>

<div></div>

</body>
</html>