页面嵌入式流媒体播放器

出自：http://www.cnblogs.com/riky/archive/2007/03/04/663269.html

1.流媒体简介

多媒体信息的数据量很大，在网络上传输音/视频等信息主要有下载和流式传输两种方案，流式传输采用的是边接收边播放的原则，即数据流由流媒体服务器向用户计算机连续、实时地传送，客户机不必等到

整个文件全部下载完毕，只需经过几秒或十数秒的启动延时即可进行观看，采用一边播放，一边下载，一边丢弃的方式，节省了客户端存储空间，有效的利用了带宽，并真正实现作品知识产权保护。

实现流媒体传输需要2个条件：支持流式传输的流媒体服务器和能流式传输的流媒体文件。目前主要有三家流媒体公司在这方面占主导市场：

(1)Microsoft公司的WindowsMedia

http://www.microsoft.com/windows/windowsmedia/

(2) RealNetworks公司的RealMedia

http://www.real.com

(3) Apple公司的QuickTime

http://www.apple.com/quicktime/download/

图1为流媒体网络播放的过程。

图1 流媒体传输原理

2.流媒体文件的网上发布方式

与图片文字不同的是，浏览器本身不能播放流媒体文件，需要插件或安装播放器，常用的播放器如Windows Media Player或Real Player可到相应的站点都提供免费下载使用。

流媒体文件页面发布一般有2种方式：页面链接和页面嵌入。采用页面嵌入式，播放器成为页面的一个基元，影片或声音无间隙地内嵌在网页中，当页面打开时便可自动播放，其好处主要有：(1)设计者可以完全控制播放器的外观和功能，也就可以自由设计播放器的尺寸，在页面中位置，可以使用的按纽，播放指定的唯一文件，与页面实现无缝结合。(2)通过页面脚本语言JavaScript或VBScript来控制播放器，可以创建自定义的播放器外观和实现特殊功能，例如实现页面点唱机功能。

对于Windows Media 还是Real Media视频文件都包括2个文件：一个为视频源文件，一个为指向源文件的指针文件，利用指针文件来重定向流信息的主要原因是：目前通用的客户端浏览器通常均不能直接支持用于播放流信息的MMS协议或RTSP协议，需要向流媒体服务器发出请求，由Media Server以流式传输方式播放指针文件中指定的视频源文件。本文以Windows Media为例说明其实现方法[1]。

在页面加入视频最简单的方法就是在页面中用HTML语言加入指向Web Server的指针文件，先使用文本编辑器生成yourfile.asx指针文件，它是纯文本文件，其中代码如下：

<TITLE>yourfile.asx</TITLE>

<ENTRY>

<TITLE>A Simple ASX</TITLE>

</ENTRY>

</ASX>

它的<entry></entry>可以有多个，表示有多个流要播放，也就是播放列表，每个<entry></entry>之间还有属于每个流的相关信息包括TITLE，AUTHOR，COPYRIGHT等。生成yourfile.asx文件后，把它上传到Web Server，且要和播放页面在同一个路径下。

嵌入式页面在IE采用的是ActiveX Control技术，对Netscape Navigator而是采用plug-in技术。要实现流媒体直接在页面中播放，先用上述方法创建asx指针文件，或者可以用同一个asx，具体实现的话，如在Microsoft FrontPage中，通过插入Windows Media Player 这个ActiveX控件，在HTML中BODY项中将会自动生成<object > </object>代码，如下所示。你所要做的就是根据你的要求更改Param项参数，其中Param项的FileName参数指向流媒体文件的指针文件asx，即http://server/path/your-file.asx，各参数项根据自己要求设置。

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" align="center">

pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"

src=" http://server/path/your-file.asx " align="center"

width=176

height=144

autostart=1

showcontrols=0>

</embed>

</object>

播放窗口适宜大小:

窗口大小	传输速率
Width=160 height=120	适合28.8kbps
Width=240 height=160	适合56kbps
Width=320 height=240	适合高于100kbps ,全屏要达到300kbps.

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的属性和方法实现了一个流媒体嵌入式页面点唱机功能。

点唱机的完整代码如下：

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

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;

}

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>

<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">

</OBJECT><P>

<p>选择播放的电影

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页面嵌入式流媒体点唱机实现

4.结束语

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

posted on 2009-06-17 14:57 上午的绝缘杯阅读(5797) 评论(0) 编辑收藏举报