网页内置播放器的制作-文档

网页内置播放器的制作
目前，全国各高等院校都在积极的申报省级或国家级精品课程。

为了更好的播放精品课程的网络视频，使精品课程录像在网上浏览时不用打开单独的播放器窗口，笔者经过反复测试，现总结网页内置播放器制作的过程及步骤如下：
1、首先建立一个本地站点。

在本地机上建立一个根目录文件夹“admin”，然后在它下面建立两个子文件夹（file和video）和两个文件（default.htm和news.asp）。

2、文件夹video是用来存放所要被调用的不同格式的视频文件的文件夹。

目前精品课程主要生成两种视频格式，一种是用windows Media Player播放的wmv格式，另一种是用RealOne Player播放的rm格式。

在video文件夹中建立两个子文件夹，命名为mediaplay和realone。

在mediaplay文件夹中放入wmv 格式的视频文件，在realone文件夹中放入rm格式的视频文件。

3、文件夹file存放调用视频文件的活动服务器页面文件。

在file文件夹中也建立两个子文件夹，命名为mediaplay和realone。

在两个文件夹中分别建立和video文件夹中的子文件夹的视频文件个数一样多的活动服务器页面asp文件。

所以在mediaplay和realone两个文件夹中存放的是相同文件名的文件，但不同之处就是所调用的视频文件的格式不同。

例如：在两个文件夹中都有news1.asp。

活动服务器页面的程序代码如下：
＜SCRIPT LANGUAGE="JavaScript"＞
function TestBrowser(){
＜P align=center＞
＜div id=mtvdo style=position:absolute; width:219; height:230; left:0;top:0; background-color:#330088; float:right; border:0px solid #ccc;＞
＜embed id=wmper
src="/admin/video/mediaplay/issc.wmv" autostart=false width=300 height=300 loop=false ＞＜/embed＞
＜center＞＜a class=thislnk style=cursor:hand onclick="javascript:wmper.displaysize=3;"＞[全屏] ＜/a ＞
＜a class=thislnk style=cursor:hand
onclick="javascript:wmper.volume=0;"＞音量最大化＜/a＞＜/center＞
＜/div＞
＜/p＞ }
}
＜/script＞
说明：这些活动服务器页面文件是用来调用video文件夹中的视频文件。

4、打开Micromedia Dreamweaver，建立一个文件
default.htm，此文件是主页文件，是用来显现所有要播放的视频文件的链接和播放你所点击的视频文件。

它主要通过调用file 文件夹中的两种相同名称不同代码的文件，由这两种文件再去调用video文件夹中的两种不同格式的视频文件，来实现内置播放器播放不同格式视频的目的。

第一步，建立链接函数。

在default.htm中用JavaScript 建立两个自定义函数，这样可以在视频连接时使用相同的名称，通过不同函数的id实现不同的视频播放。

这儿假设播放两段wmv 视频和两段rm视频。

程序代码如下：
＜script language="javascript"＞
function mediaplay(id){
if(id==1)
{
window.vod.location="file/mediaplay/news.asp"
}
else if(id==2)
{
window.vod.location="file/mediaplay/news1.asp"}
}
function realone(id)
{
if(id==1)
{
window.vod.location="file/realone/news.asp"}
else if(id==2)
{
window.vod.location="file/realone/news1.asp"}
}
＜/script＞
说明：id的多少根据video文件夹中视频文件的多少而定。

第二步，在default.htm文件中使用表格、框架等工具定位需要播放的视频连接。

在需要播放视频的位置插入iframe，代码如下：＜iframe border="1" cellspacing="0"
frameborder="0" name="vod" marginwidth=0
framespacing=0src="news.asp"; frameborder=0 noResize width=100% scrolling=NO height=100% vspale="0"＞＜
/iframe＞。

说明：iframe的作用是在网页中插入一个框窗以显示另一文件。

它是一个围堵标记，通常 iframe 配合一个辨认浏览器的Java Script会较好，若javascript认出该浏览器并非 Internet Explorer ，便会切换至另一版本。

＜iframe＞的参数设定如下：
＜iframe src="iframe.html" name="test"
align="MIDDLE" width="300" height="100" marginwidth="1"
marginheight="1" frameborder="1" scrolling="Yes"＞ ?
src="iframe.html"相对或绝对路径。

name="test" 框窗名称，是连结 target 参数所要的
align="MIDDLE" 可选值为 left, right, top, middle, bottom，作用不大
width="300" height="100"宽及长，以 pixels 为单位。

marginwidth="1" marginheight="1" 文件与框边的空间
frameborder="1" 1 显边框 0 则不。

（可是 yes 或 no）scrolling="Yes"使用 Yes容许卷动，No 则不容许
5、建立一个活动服务器页面，命名为“news.asp”。

在其中建立一个大小为300*300的播放器，用来被主页文件default.htm调用，代码如下：
＜SCRIPT LANGUAGE="JavaScript"＞
function TestBrowser(){
＜P align=center＞
＜div id=mtvdo style=position:absolute; width:219; height:230; left:0;top:0; background-color:#330088; float:right; border:0px solid #ccc;＞
＜embed id=wmper src="news.wmv" autostart=false width=300 height=300 loop=false ＞＜/embed＞
＜center＞＜a class=thislnk style=cursor:hand onclick="javascript:wmper.displaysize=3;"＞[全屏] ＜/a
＞
＜a class=thislnk style=cursor:hand
onclick="javascript:wmper.volume=0;"＞音量最大化＜/a＞＜/center＞
＜/div＞
＜/p＞}
}
＜/script＞
6、在default.htm文件中，输入视频链接文字，如：“精品课程.wmv”，在属性面板中输入链接的相对路径，如：
“#play”。

在代码窗口中输入“＜a href="#play"
onclick="mediaplay(1)"＞精品课程.wmv＜/a＞”。

这样就可以调用file文件夹的mediaplay子文件夹中的活动服务器页面news1.asp，再由new1.asp调用video文件夹中的相应视频文件，就可以在网页内置的播放器中播放了。

并且可以控制播放，如暂停、快进等。

需要说明的是，网上播放器是一种能够利用网络传输，在同一网页上播放不同格式影片的网页内置播放器，要求必须在浏览网页的机器上安装了相应的播放软件，否则是不能正常播放影片的。