当前位置: 主页 > 应用视频 > 视频分享交流 > 网站页面嵌入式流媒体点唱机的实现(3)

网站页面嵌入式流媒体点唱机的实现(3)

2009-03-01   计算机世界网 / 未知 点击: 标签:流媒体
  

3. 具体实现

Media Player做为一个ActiveX对象,有很多的属性(Property)和方法(Method)可以供Web页使用,如果与JavaScript结合的话,可以实现更复杂的功能,具体用到了Media Player的Play( ), Pause( ), stop( ) 方法实现播放、暂停、停止操作,利用Media Player的displaySize、showControls、fileName属性控制播放窗口大小、按钮的可见、改变播放的媒体文件,由于Media Player对象的属性和方法太多,我们不可能在此一一介绍,用户在使用时可以参考Media Player SDK[2]的帮助文档以获取更多的信息。本文利用JavaScript语言结合Media Player的属性和方法实现了一个流媒体嵌入式页面点唱机功能。

点唱机的完整代码如下:

<HTML><HEAD>

<TITLE>嵌入式流媒体页面点唱机</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

<!--先定义流媒体文件结构,加入欲播放的流媒体文件-->

var streams = new Array();

streams[0] = new makeStream("http://server/path/your-file.asx", "Your Movie Name");

streams[1] = new makeStream("mms:// windows media server/sample.asf ", "Sample Movie");

function makeStream(url, name) {

this.url = url;

this.name = name;

}

function handleControlsOnOffClick() {

if (document.mediaPlayer.showControls == true) {

document.mediaPlayer.showControls = false;

document.playerCtrl.controls.value = " 显示控件 ";

}

else { document.mediaPlayer.showControls = true;

document.playerCtrl.controls.value = " 隐藏控件 "

}

}

function handlePlayOrPauseClick(){

var state;

playerStatus = document.mediaPlayer.playState;

if (playerStatus == 6) {

document.mediaPlayer.play();

document.playerCtrl.playOrPause.value = " 暂停 ";

}

else if (playerStatus == 1) {

document.mediaPlayer.play();

document.playerCtrl.playOrPause.value = " 暂停 ";

}

else if (playerStatus == 2) {

document.mediaPlayer.pause();

document.playerCtrl.playOrPause.value = " 播放 ";

}

}

function changeSize(newSize) {

document.mediaPlayer.displaySize = newSize;

}

<!--当用户改变欲播放的流媒体文件时,调用Media Player的stop( )方法,把URL地址赋值到Media Player的fileName参数中,Media Player重新开始播放-->

function change() {

var list = document.playerCtrl.streams;

var streamURL = list.options[list.selectedIndex].value;

document.mediaPlayer.stop();

document.playerCtrl.playOrPause.value = " 暂停 ";

document.mediaPlayer.fileName = streamURL;

}

</SCRIPT>

</HEAD>

<BODY LEFTMARGIN = "100">

<h3>嵌入式流媒体页面点唱机</h3><P>

<OBJECT

ID="mediaPlayer"

CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"

CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"

STANDBY="Loading Microsoft Windows Media Player components..."

TYPE="application/x-oleobject" width="286" height="225">

<PARAM NAME="fileName" VALUE=" server/path/your-file.asx ">

<PARAM NAME="animationatStart" VALUE="true">

<PARAM NAME="transparentatStart" VALUE="true">

<PARAM NAME="autoStart" VALUE="true">

<PARAM NAME="showControls" VALUE="true">

</OBJECT><P>

<FORM NAME="playerCtrl">

<INPUT TYPE="button" VALUE="暂停" NAME="playOrPause" onClick="handlePlayOrPauseClick()" STYLE = "font-family:courier">

<INPUT TYPE="button" VALUE="隐藏控件" NAME="controls" onClick="handleControlsOnOffClick()" STYLE = "font-family:courier"><BR>

<INPUT TYPE="button" VALUE="小屏幕" NAME="small" onclick="changeSize(1)" STYLE="font-family:courier"><INPUT TYPE="button" VALUE="原始大小" NAME="normal" onclick="changeSize(0)" STYLE="font-family:courier"><INPUT TYPE="button" VALUE="大屏幕" NAME="large" onclick="changeSize(2)" STYLE="font-family:courier">

<p>选择播放的电影

<SCRIPT LANGUAGE="JavaScript">

<!--当用户从从下拉列表中选择想播放的流媒体文件后,获取该文件的URL和Name-->

with (document) {

writeln('<SELECT NAME="streams" onChange="change()">');

for (var i = 0; i < streams.length; i++) {

writeln('<OPTION VALUE="', streams[i].url, '">', streams[i].name);

}

writeln('</SELECT>');

}

</SCRIPT>

</p>

</FORM> </BODY> </HTML>

其中播放列表中的流媒体文件,根据定义包括url(指向媒体文件网络地址)和name(页面显示的文件名),可以根据要求加入多个不同地址的媒体文件,指向的媒体文件可以是ASX和ASF的2种类型,其写法不一样,采用ASX索引文件用http协议指向对应的索引文件地址,采用ASF媒体文件用mms流媒体传输协议直接播放指向的媒体文件。图2为具体实现的一个例子。

图2 页面嵌入式流媒体点唱机实现
图2 页面嵌入式流媒体点唱机实现

 

4. 结束语

  本文对Media Service的客户应用程序Media Player在Web页面中的使用做了简单的介绍,结合JavaScript语言具体实现了一个页面嵌入式点唱机程序,可以实现流媒体文件的选择打开和播放,该例子应用在音乐和视频点播网站可以更好的保护作者的版权。

顶一下
(0)
0%
踩一下
(0)
0%
精彩推荐