如何同步播放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>

posted @ 2008-08-15 11:45  快乐就好  阅读(2449)  评论(0编辑  收藏  举报