如何同步播放asf和vga文件的教学视频
(1)文件夹结构
教学视频很多是在一个网页窗口下显示三个子窗口:
一个是asf的(frmleftup.htm),Media Player播放,一般在左上,为主讲人;
一个是PPT目录(frmleftdown.htm),就是一个网页,一般在左下;
一个是vga格式的(frm000.htm),用VGAPlayer播放,一般在右边,较大窗口,播放演示内容。
所以,要同步播放,必须同时控制这三个窗口同步,可以利用一个模板来达到目的(模板文件附在最后)。
这种类型的视频课件是将每一集的asf、vga、三个子窗口文件和asf视频链接文件(asx)放在同一个文件夹里面。
文件夹结构:
1/ycx/
1(第1集文件夹)
index.htm(每集主文件)
ycx(文件夹,如果这个变了,在index.htm文件中应将ycx目录的字符都进行替换,否则找不到子窗口文件)
frm000.htm(右边,演示窗口)
frmleftdown.htm(左下窗口,PPT目录)
frmleftup.htm(左上,主讲人窗口)
localclip.asx(本机播放asf视频文件名)
remoteclip.asx(远程播放asf视频文件名)
Screen.vga(每集的VGA视频演示文件)
000.asf(每集的主讲人视频文件)
注意:
ycx(运筹学文件夹,如果这个变了,在index.htm文件中将src="ycx/frmleftup.htm"、src="ycx/frmleftdown.htm"
src="ycx/frm000.htm"三处的ycx都换掉,否则找不到子窗口文件)
每个文件夹对应1集,每个文件夹下的文件都是一样的名字,只是内容不一样,其中需要替换的是
000.asf、Screen.vga和frmleftdown.htm(详见附件中frmleftdown.htm内容),frmleftdown.htm不换也没关系,不影响播放,只是没有目录。
建好一个文件夹后,其它只需要复制粘贴就可以了,然后把相应的文件替换掉。
(2)视频课件下载
将每集的000.asf和Screen.vga两个文件下载后放到相应的ycx文件夹下,比如:
frmleftdown.htm文件要在打开远程播放网页(三个窗口的,左下就是frmleftdown.htm),另存为保存,在资源文件夹内获得。
第1集的两个文件放到1目录的ycx文件夹下,即1/ycx/
第2集的两个文件放到2目录的ycx文件夹下,即2/ycx/
下载地址的获取需要先知道,可以用网络嗅探(影音神探)获取,然后用迅雷下载即可。
依此类推,都放到相应的文件夹下。
最后,建立一个主文件如ycx.htm,做成链接连到每个文件夹下的index.htm,以后只要直接打开 ycx.htm 就可以了。
注意:
必须保证文件夹下的文件名都是一样的。
视频和演示文件必须改名字为000.asf和Screen.vga,注意这是包括扩展名的,要是不显示扩展名,
请执行“工具--->文件夹选项--->查看,将隐藏已知文件类型的扩展名前面的勾去掉,点确定即可。
安装了WinXPSP2补丁的系统,会出现“为帮助保护您的安全,Internet Explorer已经限制此文件显示
可能访问您计算机的活动内容。单击此处查看选项...”的提示,你只要单击后选择“允许阻止内容”即可。
您需要安装以下两个软件:
Windows Media Player10 微软下载(播放asf文件)
PowerCreator VGAPlayer4.1.0.885(播放vga文件)
http://www.powercreator.com.cn/download.asp
http://www.powercreator.com.cn/download/free/VGAPlayer.exe
(3)模板文件
模板文件超文本内容,将以下文件,新建一个txt文档,粘贴内容再将扩展名改为相应扩展名(.htm、.asx)即可,然后根据需要适当修改内容
如果是从网上在线播放网页另存为形成的文件结构,假如另存为ycx.htm,则会生成ycx-files资源目录,
将frm000.htm、frmleftdown.htm、frmleftup.htm三个文件放在该目录,
只要按以下步骤操作即可实现同步有目录播放:
①将ycx-files目录名改为ycx,把“ycx.htm”改为“index.htm”并把“index.htm”用记事本打开,把第二行:
<!-- saved from url=(0044)http://219.144.186.220/ycx/1/frmleftdown.htm-->
修改为:<!-- saved from url=(0044) ycx/frmleftdown.htm -->
利用替换功能将所有 ycx-files字符替换为ycx,
特别注意src="ycx-files/frmleftup.htm"、src="ycx-files/frmleftdown.htm"、src="ycx-files/frm000.htm"已替换
②frm000.htm、frmleftdown.htm、frmleftup.htm三个文件用记事本打开,把第二行进行相同的修改;
③补充localclip.asx、remoteclip.asx两文件,下载相应的Screen.vga、000.asf放入ycx目录。
这样就完成了1集的结构,可以实现同步有目录播放了。
若不能保存网页,则可以直接采用以下模板来制作结构:
然后只要把index文件的资源目录修改成相同的名字,补充其它几个文件即可实现同步按目录播放。
红色为修改内容,ycx是放每集资料的目录名
index.htm内容(每讲的主文件):
<HTML><HEAD><TITLE>运筹学教程</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD><FRAMESET rows=*
cols=20%,*>
<FRAMESET id=LeftFrame rows=38%,* cols=*><FRAME id=LeftupFrame
name=LeftupFrame marginWidth=0 borderColor=white marginHeight=0
src="ycx/frmleftup.htm" frameBorder=2 scrolling=no
target="RightFrame">
<FRAME id=LeftdownFrame name=LeftdownFrame marginWidth=10
borderColor=white marginHeight=10
src="ycx/frmleftdown.htm"
frameBorder=2>
</FRAMESET><FRAME id=RightFrame name=RightFrame marginWidth=0
borderColor=white marginHeight=0 src="ycx/frm000.htm"
frameBorder=2 scrolling=no BGCOLOR="#000000"></FRAMESET></HTML>
frmleftup.htm内容(左上窗口文件,播放主讲人):
<HTML><HEAD><TITLE>Video</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript>
if (window.name != "LeftupFrame") location = "../index.htm";
</SCRIPT>
<SCRIPT language=javascript event=onload for=window>
//Load ASF File
if(document.location.protocol == "file:")
AsxFileName = "localclip.asx";
else
AsxFileName = "remoteclip.asx";
MediaPlayer.URL = AsxFileName;
</SCRIPT>
<SCRIPT language=javascript>
var mpStopped=1, mpPaused=2, mpPlaying=3,
mpScanForward=4, mpScanReverse=5, mpEnded=8,
NeverUpdatePosition=1,TimerID=0,
Waiting=0,WaitingCount=0,
AsxFileName;
function Syn()
{
TimerID = setTimeout("Syn()",1000);
if (MediaPlayer.PlayState == mpPlaying)
{
if ((MediaPlayer.Controls.currentPosition * 1000 > parent.RightFrame.VGAPlayer.Max) &&
(parent.RightFrame.VGAPlayer.Max < parent.RightFrame.VGAPlayer.Duration))
{
Waiting = 1;
WaitingCount = 10;
MediaPlayer.Controls.Pause();
}
parent.RightFrame.VGAPlayer.CurrentPosition = MediaPlayer.Controls.currentPosition * 1000;
}
else
if (Waiting)
{
WaitingCount--;
if (WaitingCount == 0)
{
if (MediaPlayer.Controls.currentPosition * 1000 < parent.RightFrame.VGAPlayer.Max)
{
Waiting=0;
MediaPlayer.Controls.Play();
}
else
WaitingCount = 10;
}
}
}
</SCRIPT>
<SCRIPT language=javascript event=Buffering(Start) for=MediaPlayer>
if (Start)
{
parent.RightFrame.VGAPlayer.Pause();
}
else
{
parent.RightFrame.VGAPlayer.Play();
}
</SCRIPT>
<SCRIPT language=javascript event=playStateChange(NewState) for=MediaPlayer>
switch(NewState)
{
case mpPlaying:
parent.RightFrame.VGAPlayer.Play();
if (TimerID == 0) Syn();
break;
case mpPaused:
parent.RightFrame.VGAPlayer.Pause();
break;
case mpStopped:
parent.RightFrame.VGAPlayer.Stop();
break;
case mpEnded:
parent.RightFrame.VGAPlayer.Stop();
}
</SCRIPT>
<SCRIPT language=javascript
event="PositionChange(dblOldPosition, dblNewPosition)" for=MediaPlayer>
parent.RightFrame.VGAPlayer.CurrentPosition = dblNewPosition * 1000;
</SCRIPT>
<META content="MSHTML 6.00.2900.2873" name=GENERATOR></HEAD>
<BODY bgColor=black>
<OBJECT id=MediaPlayer height="100%" width="100%" align=right
classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6><PARAM NAME="URL" VALUE=""><PARAM NAME="rate" VALUE="1"><PARAM NAME="balance" VALUE="0"><PARAM NAME="currentPosition" VALUE="0"><PARAM NAME="defaultFrame" VALUE=""><PARAM NAME="playCount" VALUE="1"><PARAM NAME="autoStart" VALUE="-1"><PARAM NAME="currentMarker" VALUE="0"><PARAM NAME="invokeURLs" VALUE="-1"><PARAM NAME="baseURL" VALUE=""><PARAM NAME="volume" VALUE="100"><PARAM NAME="mute" VALUE="0"><PARAM NAME="uiMode" VALUE="full"><PARAM NAME="stretchToFit" VALUE="-1"><PARAM NAME="windowlessVideo" VALUE="0"><PARAM NAME="enabled" VALUE="-1"><PARAM NAME="enableContextMenu" VALUE="-1"><PARAM NAME="fullScreen" VALUE="0"><PARAM NAME="SAMIStyle" VALUE=""><PARAM NAME="SAMILang" VALUE=""><PARAM NAME="SAMIFilename" VALUE=""><PARAM NAME="captioningID" VALUE="">
type=application/x-oleobject standby="Loading Microsoft? Windows?
Media Player components...">
</OBJECT></OBJECT></BODY></HTML>
frm000.htm内容(右边窗口,播放演示内容)
<HTML><HEAD><TITLE>VGA Frame</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2873" name=GENERATOR>
<META content=none name="Microsoft Border">
<STYLE>A:link {
TEXT-DECORATION: none
}
A:visited {
TEXT-DECORATION: none
}
A:active {
TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: bold; COLOR: rgb(255,255,0); TEXT-DECORATION: none
}
</STYLE>
<SCRIPT language=javascript>
if (window.name != "RightFrame") location = "../index.htm";
</SCRIPT>
<SCRIPT language=javascript event=OnSkip(Seconds) for=VGAPlayer>
parent.LeftupFrame.MediaPlayer.Controls.CurrentPosition = Seconds;
</SCRIPT>
<SCRIPT language=javascript event=onload for=window>
//Load VGA File
Dir = new String(location);
Dir = Dir.substring(0, Dir.length - 10);
VGAPlayer.Open(Dir + 'Screen.vga');
</SCRIPT>
</HEAD>
<BODY bgColor=#000000>
<P>
<OBJECT id=VGAPlayer style="LEFT: 0px; POSITION: absolute; TOP: 0px"
codeBase=VGAPlayer.cab#version=3,0,1,648 height="100%" width="100%"
classid=clsid:339C1EE2-1029-46B8-81F1-360217F26FC4><PARAM NAME="Visible" VALUE="-1"><PARAM NAME="AutoScroll" VALUE="0"><PARAM NAME="AutoSize" VALUE="0"><PARAM NAME="AxBorderStyle" VALUE="1"><PARAM NAME="Caption" VALUE="ZoomPic"><PARAM NAME="Color" VALUE="2147483663"><PARAM NAME="Font" VALUE="MS Sans Serif"><PARAM NAME="KeyPreview" VALUE="0"><PARAM NAME="PixelsPerInch" VALUE="96"><PARAM NAME="PrintScale" VALUE="1"><PARAM NAME="Scaled" VALUE="-1"><PARAM NAME="DropTarget" VALUE="0"><PARAM NAME="HelpFile" VALUE=""><PARAM NAME="DoubleBuffered" VALUE="0"><PARAM NAME="Enabled" VALUE="-1"><PARAM NAME="Cursor" VALUE="0"></OBJECT></P></BODY></HTML>
frmleftdown.htm内容:
跟PPT内容相关,通过调整Media Player的位置来控制同步,VGA是自动跟Media Player同步的
根据内容替换文件即可,不换也不影响播放
如果是从网上在线播放网页另存为保存的资源文件夹中获取的frmleftdown.htm,则需要把以下蓝色部分:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0044)http://219.144.186.220/ycx/1/frmleftdown.htm-->
修改为:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0044) ycx/frmleftdown.htm -->
也就是改成本地目录,这样就可以实现按目录播放了。
文件实例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0044)ycx/frmleftdown.htm -->
<HTML><HEAD><TITLE>Overview Hyperlinks</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript>
if (window.name != "LeftdownFrame") location = "../index.htm";
</SCRIPT>
<SCRIPT language=javascript>
function Skip(seconds)
{
parent.LeftupFrame.MediaPlayer.Controls.CurrentPosition = seconds;
parent.LeftupFrame.MediaPlayer.Controls.Play();
}
</SCRIPT>
<STYLE>TD {
FONT-SIZE: 9pt; COLOR: #00ff00; FONT-FAMILY: Arial
}
A {
FONT-SIZE: 9pt; COLOR: #00ff00; FONT-FAMILY: Arial; TEXT-DECORATION: underline
}
</STYLE>
<META content="MSHTML 6.00.3790.2993" name=GENERATOR></HEAD>
<BODY bgColor=black>
<TABLE width="100%" border=0>
<TBODY>
<TR>
<TD vAlign=top width=42>主题:</TD>
<TD>运筹学</TD></TR>
<TR>
<TD vAlign=top width=42>主讲:</TD>
<TD>杨斌鑫(讲师)</TD></TR>
<TR>
<TD vAlign=top width=42>版权:</TD>
<TD>西北工业大学网络教育学院</TD></TR>
<TR>
<TD vAlign=top width=42>描述:</TD>
<TD>运筹学第1讲</TD></TR>
<TR>
<TD>
<TR>
<TD vAlign=top width=42>索引:</TD>
<TD><A onmouseover='this.style.cursor="hand"'
onclick=javascript:Skip(586)>2.运筹学的性质与特点(00:09:46)</A> </TD></TR>
<TR>
<TD vAlign=top width=42></TD>
<TD><A onmouseover='this.style.cursor="hand"'
onclick=javascript:Skip(882)>3.运筹学的主要内容(00:14:42)</A> </TD></TR>
<TR>
<TD vAlign=top width=42></TD>
<TD><A onmouseover='this.style.cursor="hand"'
onclick=javascript:Skip(3007)>本章内容结束(00:50:07)</A> </TD></TR></TBODY></TABLE>
<P>
<STYLE type=text/css>BODY {
BACKGROUND-POSITION: left bottom; BACKGROUND-ATTACHMENT: fixed; BACKGROUND-IMAGE: url(images\xia.gif); BACKGROUND-REPEAT: no-repeat
}
</STYLE>
</P></BODY></HTML>
localclip.asx内容:
<ASX VERSION=3.0>
<Entry>
<Ref href="000.asf"/>
</Entry>
</ASX>
remoteclip.asx内容:
<ASX VERSION=3.0>
<Entry>
<Ref href="000.asf"/>
</Entry>
</ASX>