在Web页中使用Media Player一

转载 2007年09月17日 10:23:00

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

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

流媒体文件页面发布一般有2种方式:页面链接和页面嵌入。采用页面嵌入式,播放器成为页面的一个基元,影片或声音无间隙地内嵌在网页中,当页面打开时便可自动播放,其好处主要有:(1)设计者可以完全控制播放器的外观和功能,也就可以自由设计播放器的尺寸,在页面中位置,可以使用的按纽,播放指定的唯一文件,与页面实现无缝结合。(2)通过页面脚本语言&#106avascript或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="middle">

<param name="FileName" &#118alue="server/path/your-file.asx ">

<param name="ShowStatusBar" &#118alue="True">

<param name="DefaultFrame" &#118alue="mainFrame">

<embed type="application/x-mplayer2"

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

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

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.


2.具体实现

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

点唱机的完整代码如下:

<HTML><HEAD>

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

<SCRIPT LANGUAGE = "&#106avascript">

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

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.&#118alue = " 显示控件 ";

}

else { document.mediaPlayer.showControls = true;

document.playerCtrl.controls.&#118alue = " 隐藏控件 "

}

}

function handlePlayOrPauseClick(){

var state;

playerStatus = document.mediaPlayer.playState;

if (playerStatus == 6) {

document.mediaPlayer.play();

document.playerCtrl.playOrPause.&#118alue = " 暂停 ";

}

else if (playerStatus == 1) {

document.mediaPlayer.play();

document.playerCtrl.playOrPause.&#118alue = " 暂停 ";

}

else if (playerStatus == 2) {

document.mediaPlayer.pause();

document.playerCtrl.playOrPause.&#118alue = " 播放 ";

}

}

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].&#118alue;

document.mediaPlayer.stop();

document.playerCtrl.playOrPause.&#118alue = " 暂停 ";

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" &#118alue=" server/path/your-file.asx ">

<PARAM NAME="animationatStart" &#118alue="true">

<PARAM NAME="transparentatStart" &#118alue="true">

<PARAM NAME="autoStart" &#118alue="true">

<PARAM NAME="showControls" &#118alue="true">

</OBJECT><P>

<FORM NAME="playerCtrl">

<INPUT TYPE="button" &#118alue="暂停" NAME="playOrPause" &#111nClick="handlePlayOrPauseClick()" STYLE = "font-family:courier">

<INPUT TYPE="button" &#118alue="隐藏控件" NAME="controls" &#111nClick="handleControlsOnOffClick()" STYLE = "font-family:courier"><BR>

<INPUT TYPE="button" &#118alue="小屏幕" NAME="small" &#111nclick="changeSize(1)" STYLE="font-family:courier"><INPUT TYPE="button" &#118alue="原始大小" NAME="normal" &#111nclick="changeSize(0)" STYLE="font-family:courier"><INPUT TYPE="button" &#118alue="大屏幕" NAME="large" &#111nclick="changeSize(2)" STYLE="font-family:courier">

<p>选择播放的电影

<SCRIPT LANGUAGE="&#106avascript">

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

with (document) {

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

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

writeln('<OPTION &#118alue="', streams[i].url, '">', streams[i].name);

}

writeln('</SELECT>');

}

</SCRIPT>

</p>

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

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

 

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

3.结束语

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

VC2008 Windows Media Player控件的使用技巧

操作系统:Windows 7 软件环境:Visual C++ 2008 SP1 本次目的:在VC2008或者VC2005下Windows Media Player控件的用法       折腾...

VC++2008 如何使用Windows Media Player控件

操作系统:Windows 7 软件环境:Visual C++ 2008 SP1 本次目的:在VC2008或者VC2005下Windows Media Player控件的用法       折腾了好...
  • cghver
  • cghver
  • 2011年07月29日 18:44
  • 6086

VC2008 Windows Media Player控件的使用技巧(三)

该博客旨在分享IT技术心得和实际工作中遇到问题的解决方法,以下是新浪博客地址http://blog.sina.com.cn/qianyumolu,则为分享经济、行业趋势、心灵文章等,有兴趣的朋友可以踩...
  • lupopo
  • lupopo
  • 2014年03月19日 15:34
  • 733

【VC学习】VC2010 Windows Media Player控件的使用技巧

声明:以下博客基于@无幻 VC2008 Windows Media Player控件的使用技巧,自行学习整理 附上原地址:http://blog.csdn.net/akof1314/article/...
  • PORTB
  • PORTB
  • 2015年05月08日 23:47
  • 3809

Media player控件基本使用步骤

来自:http://lyh830612.blog.163.com/blog/static/19027339720116122255264/ Media player控件基本使用步骤如下:...

怎样使用MFC 调用windows系统程序 windows media player

使用MFC 调用windows系统程序 windows media player

C#中Windows Media Player控件使用实例|方法

Windows Media Player控件 Windows Media Player是一种媒体播放器,可以播放当前最流行的音频、视频文件和大多数混合型的多媒体文件。为了便于程序的开发,Visual ...

与在MFC中使用Media Player控件有关的资料

在安装了WindowsMediaPlayer9.0后,一个WindowsMediaPlayer ActiveX控件也同时被安装到系统并完成注册 。该控件为开发人员提供了WindowsMediaP...
  • nodeman
  • nodeman
  • 2015年04月27日 17:31
  • 1164

VC2008 Windows Media Player控件的使用技巧(二)

操作系统:Windows 7 软件环境:Visual C++ 2008 SP1 本次目的:在VC2008下Windows Media Player控件的用法之实用篇       很奇怪,也许...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在Web页中使用Media Player一
举报原因:
原因补充:

(最多只允许输入30个字)