最近學了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="瀏覽"/>
<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>