出自：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指针文件，它是纯文本文件，其中代码如下：
<ASX version="3.0">
<TITLE>yourfile.asx</TITLE>
<ENTRY>
<TITLE>A Simple ASX</TITLE>
<AUTHOR>Your Name</AUTHOR>
<REF HREF="mms:// windows media server/sample.asf"/>
</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，各参数项根据自己要求设置。
<object id="MediaPlayer1" width=180 height=200
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">
<param name="FileName" value="server/path/your-file.asx ">
<param name="ShowStatusBar" value="True">
<param name="DefaultFrame" value="mainFrame">
<embed type="application/x-mplayer2"
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的属性和方法实现了一个流媒体嵌入式页面点唱机功能。
点唱机的完整代码如下：
<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页面嵌入式流媒体点唱机实现
4.结束语
本文对Media Service的客户应用程序Media Player在Web页面中的使用做了简单的介绍，结合JavaScript语言具体实现了一个页面嵌入式点唱机程序，可以实现流媒体文件的选择打开和播放，该例子应用在音乐和视频点播网站可以更好的保护作者的版权。