js操作視頻控件

 最近學了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>

<STYLE type="text/css">
<!--
*{font-size:12px; font-family:宋體,Arial;}
#playBack{ 
   width:400px;
   height:400px;
            background:url(bg.jpg);              
}
body
{
  background-image:url('bj.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
 
-->
</STYLE>
 
</head>
<body>

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

    </div>
      <p>輸入播放的文件</p>
 <ul>
    <li>輸入文件:<input id ="fileURL" type="file" value="瀏覽"/>&nbsp;&nbsp;
    <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>

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章