如何同步播放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”用记事本打开，把第二行：

修改为：
利用替换功能将所有 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;

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

修改为：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

也就是改成本地目录，这样就可以实现按目录播放了。

文件实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<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内容：