一边播放RM文件 一边播放相应的PPT文件 编程实现

于 2004-12-09 15:53:00 发布
阅读量86 收藏
点赞数
文章标签： 数据结构与算法

应用情景：
在制作网络课件的过程中，可能会遇到这种情况，就是需要在一个视频播放网页中，一边播放RM视频文件，一边显示相应的PowerPoint文件，并且PPT文件随着视频的播放自动进行翻页。

代码原理：
Realplayer提供的相应的编程接口，可以获取其播放时间。将PPT文件做成多个图片，根据获取的播放时间，对所显示的图片文件进行调整。

代码片断如下：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<meta http-equiv="imagetoolbar" content="no">

<script language="JScript">
<--

T_lit=new Array(0,7,36,43,71);
I_lit=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg");
PageLit=new Array("欢迎您观看课程视频文件。","根据网络情况，可能缓冲时间会比较长。请耐心等待。","如果不能播放，请查看学习帮助。");
PageUrl=new Array("help.htm","help.htm","help.htm");
PageRm="rm/堆排序.rm";
PageSo=1;
title="数据结构";
PlayStr=0;
function window.onload(){
PlayTime();
CourseEvent();
Player.setvolume(70);
li.src="pimg/heapsort/"+I_lit[0];
lw[PageSo-1].style.color="#ffffff";
setTimeout("Player.setsource(PageRm);DisPlayDiv()",1000);
setInterval("timetd.innerText=WriteTime(Player.GetPosition())+/"//"+WriteTime(Player.getlength())",300);
setTimeout(scanTime,5000);
}

function document.onclick(){
with(event.srcElement)if(tagName=="A"||tagName=="IMG")blur();
}

function document.oncontextmenu(){
return false;
}

function document.onselectstart(){
return false;
}

function document.onkeydown(){
return false;
}

function PlayTime(){
if(parseInt(Player.getposition()/1000)==T_lit[PlayStr+1]){
li.src="pimg/heapsort/"+I_lit[PlayStr+1];
PlayStr+=1;
ChkButton();
}
}

function GoTo(no){
Player.dopause();
Player.setposition(T_lit.length>1?T_lit[no]*1000:0);
li.src="pimg/heapsort/"+I_lit[no];
PlayStr=no;
ChkButton();
Player.doplay();
}

function EventPlay(e){
var t="";
if(e=="play"){
t=0;
Player.doplay();
}
if(e=="pause"){
t=1;
Player.dopause();
}
if(e=="stop"){
t=2;
GoTo(0);
Player.dostop();
backbox.src=backbox.dsrc;
}
t==0||t==1?new function(){for(i=0;i<pps.length;i++)pps[i].src=pps[i].isrc,pps[t].src=pps[t].dsrc}:new function(){for(i=0;i<pps.length;i++)pps[i].src=pps[i].ssrc;pps[0].src=pps[0].isrc}
}

var EventObject=0,Old_X,New_X;
function Button_Down(){
EventObject=event.srcElement;
Old_X=event.clientX;
EventObject.setCapture();
EventPlay("pause");
clearInterval(sinterval);
}

function Button_Move(){
if(EventObject){
New_X=event.clientX;
var MovePels=EventObject.style.pixelLeft+New_X-Old_X;
var MaxBound=document.all(EventObject.id+"Box").offsetWidth-EventObject.offsetWidth;
if(EventObject&&MovePels<=MaxBound&&MovePels>=0){
EventObject.style.pixelLeft=MovePels;
eval(EventObject.id+"Event("+EventObject.style.pixelLeft+","+MaxBound+")");
Old_X=New_X;
}
}
}

function Button_Up(){
if(EventObject){
EventObject.releaseCapture();
EventObject=0;
CourseEvent();
ChangeEvent();
ChkButton();
}
}

function CourseButtonEvent(l,m){
Player.setposition(Math.round(Player.getlength()*l/m));
}

function VolumeButtonEvent(l,m){
Player.setvolume(Math.round((l/m)*100));
}

function ChangeEvent(){
var ReturnPos="";
var sNo=Player.getposition()/1000;
for(i=T_lit.length;i>0;i--)if(T_lit[i]>sNo)ReturnPos=i;
sPlay(ReturnPos);
}

function sPlay(n){
n==""?n=I_lit.length:null;
li.src="pimg/heapsort/"+I_lit[n-1];
PlayStr=n-1;
EventPlay("play");
}

function WriteTime(p){
var secend=p;
var minute=parseInt(secend/60000).toString();
var secend=parseInt((secend-minute*60000)/1000).toString();
minute=minute.length==1?0+minute:minute;
secend=secend.length==1?0+secend:secend;
return minute+":"+secend;
}

function BackButton(){
PlayStr>0?new function(){GoTo(PlayStr-1);nextbox.src=nextbox.ssrc}:null;
}

function NextButton(){
if(PlayStr<T_lit.length-1){
GoTo(PlayStr+1);
backbox.src=backbox.ssrc;
}
}

function ChkButton(){
if(PlayStr==0)backbox.src=backbox.dsrc,nextbox.src=nextbox.ssrc;
if(PlayStr==I_lit.length-1)backbox.src=backbox.ssrc,nextbox.src=nextbox.dsrc;
if(PlayStr<I_lit.length-1&&PlayStr>0)backbox.src=backbox.ssrc,nextbox.src=nextbox.ssrc;
}
function scanTime(){
Player.getplaystate()==3&&Player.getposition()==Player.getlength()&&PageSo!=PageUrl.length?location=PageUrl[PageSo]:setTimeout(scanTime,50);
}
function DisPlayDiv(){
Player.getplaystate()==3?LoadBr.style.display="none":setTimeout(DisPlayDiv,20);
}

function CourseEvent(){
sinterval=setInterval("CourseButton.style.pixelLeft=Math.round((CourseButtonBox.offsetWidth-CourseButton.offsetWidth)*Player.getposition()/Player.getlength());PlayTime()",300);
}

function MoveTextDiv(obj,action){
function UpMove(){
if(TextScroll.offsetTop<0){
TextScroll.style.pixelTop+=1;
}
obj.src="image/up_d.gif";
}
function DownMove(){
if(TextScroll.offsetTop>(TextScrollBox.offsetHeight-TextScroll.offsetHeight)){
TextScroll.style.pixelTop-=1;
}
obj.src="image/down_d.gif";
}
scro=setInterval(action=="up"?UpMove:DownMove,10);
function obj.onmouseout(){
clearInterval(scro);
obj.src=action=="up"?"image/up_o.gif":"image/down_o.gif";
}
}
-->
</script>

<title>test</title>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" scroll="no">
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tr>
<script language="JScript">
<!--
function WriteTd(){var str=new Array(21,15,17,27,26,53,37,42,8,10,2,5,19,235,47,60,26,16,1);for(i=0;i<str.length;i++)document.write("<td style=/"width:"+str[i]+";height:1/"></td>")}WriteTd();
-->
</script>
</tr>

<tr>
<td colspan="13"><img src="image/i_07.jpg" width="282" height="16" border="0" ></td>
<td colspan="7"><img src="image/i_08.jpg" width="478" height="16" border="0" ></td>
<td style="width:1;height:16"></td>
</tr>

<tr>
<td rowspan="10"><img src="image/i_09.jpg" width="21" height="394" border="0" ></td>
<td colspan="10" align="center" background="image/i_13.jpg" style="width:237;height:17;color:#003399"></td>
<td rowspan="4" colspan="2"><img src="image/i_10.jpg" width="24" height="221" border="0" ></td>
<td height="374" rowspan="7" >　</td>
<td rowspan="7" colspan="5" >　</td>
<td rowspan="11"><img src="image/i_14.jpg" width="16" height="414" border="0" ></td>
<td style="width:1;height:17"></td>
</tr>
<tr>
<td colspan="10" bgcolor="#000000">
<object id="Player" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width=237 height=178>
<param name="controls" value="imagewindow">
<param name="autostart" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object> </td>
<td style="width:1;height:178"></td>
</tr>
<tr>
<td colspan="5" bgcolor="#333333">　</td>
<td colspan="5" bgcolor="#333333" style="color:#ffffff" id="timetd"></td>
<td style="width:1;height:16"></td>
</tr>
<tr>
<td><img src="image/i_16.jpg" width="15" height="10" border="0" ></td>
<td colspan="7" background="image/i_17.jpg" id="CourseButtonBox"><img src="image/v_b.gif" width="10" height="10" id="CourseButton" style="position:relative;left:0" οnmοusedοwn="Button_Down()" οnmοusemοve="Button_Move()" οnmοuseup="Button_Up()"></td>
<td colspan="2"><img src="image/i_15.jpg" width="12" height="10" border="0" ></td>
<td style="width:1;height:10"></td>
</tr>
<tr>
<td colspan="12"><img src="image/i_18.jpg" width="261" height="5" border="0" ></td>
<td style="width:1;height:5"></td>
</tr>
<tr>
<td colspan="2"><img src="image/play_d.jpg" width="32" height="24" border="0" id="pps" οnclick="EventPlay('play')" dsrc="image/play_d.jpg" isrc="image/play_i.jpg" ssrc="image/play_s.jpg" style="cursor:hand"></td>
<td><img src="image/pause_i.jpg" width="27" height="24" border="0" id="pps" οnclick="EventPlay('pause')" dsrc="image/pause_d.jpg" isrc="image/pause_i.jpg" ssrc="image/pause_s.jpg" style="cursor:hand"></td>
<td><img src="image/stop_i.jpg" width="26" height="24" border="0" id="pps" οnclick="EventPlay('stop')" dsrc="image/stop_d.jpg" isrc="image/stop_i.jpg" ssrc="image/stop_s.jpg" style="cursor:hand"></td>
<td colspan="2" background="image/i_20.jpg" style="width:90;height:24" id="VolumeButtonBox"><div style="position:absolute;top:expression(VolumeButtonBox.offsetTop+3);left:expression(VolumeButtonBox.offsetLeft+3);background:url(image/vos.gif);width:expression(VolumeButton.style.pixelLeft+5);height:15"></div>
<a id="VolumeButton" style="position:relative;left:70;top:-3;width:10" οnmοusedοwn="Button_Down()" οnmοusemοve="Button_Move()" οnmοuseup="Button_Up()">
</a></td>
<td><img src="image/i_21.jpg" width="42" height="24" border="0" ></td>
<td colspan="4"><img src="image/u_s.jpg" style="cursor:hand" width="25" height="24" border="0" οnclick="Player.setmute(!Player.getmute())" οnmοuseοver="src='image/u_d.jpg'" οnmοuseοut="!Player.getmute()?src='image/u_s.jpg':null"></td>
<td><img src="image/i_19.jpg" width="19" height="24" border="0" ></td>
<td style="width:1;height:24"></td>
</tr>
<tr>
<td colspan="9" rowspan="4" valign="bottom " align="center" background="image/i_24.jpg" style="color:#ffffff">
<div style="width:220;height:130;overflow:hidden" id="TextScrollBox">
<div style="position:relative;top:0" id="TextScroll">
<br>
<script>
for(i=0;i<PageLit.length;i++){
document.write("<table style=/"width:100%/"><tr><td width=/"10/" valign=/"top/"><img src=/"image/t_ico.gif/" width=/"13/" height=/"12/"></td><td><a href=/""+PageUrl[i]+"/" target=/"_blank/" id=/"lw/">"+PageLit[i]+"</a></td></tr></table>")
}
</script>
</div>
</div>
<img style="position:absolute;top:378;left:256" src="image/up_o.gif" οnmοuseοver="MoveTextDiv(this,'up')">
<img style="position:absolute;top:394;left:256" src="image/down_o.gif" οnmοuseοver="MoveTextDiv(this,'down')">
</td>
<td rowspan="4" colspan="3"><img src="image/i_23.jpg" width="26" height="144" border="0" ></td>
<td style="width:1;height:124"></td>
</tr>
<tr>
<td><img src="image/i_11.jpg" width="235" height="7"></td>
<td rowspan="2"><img src="image/i_5F25.jpg" width="47" height="18" border="0" ></td>
<td rowspan="2"><img src="image/back_d.jpg" id="backbox" width="60" height="18" border="0" onClick="BackButton()" οnmοuseοver="src=PlayStr>0?isrc:dsrc" οnmοuseοut="src=PlayStr>0?ssrc:dsrc" dsrc="image/back_d.jpg" isrc="image/back_i.jpg" ssrc="image/back_s.jpg" style="cursor:hand"></td>
<td rowspan="2"><img src="image/i_26.jpg" width="34" height="18" border="0" ></td>
<td rowspan="2"><img src="image/next_s.jpg" id="nextbox" width="60" height="18" border="0" οnclick="NextButton()" οnmοuseοver="src=PlayStr<T_lit.length-1?isrc:dsrc" οnmοuseοut="src=PlayStr<T_lit.length-1?ssrc:dsrc" dsrc="image/next_d.jpg" isrc="image/next_i.jpg" ssrc="image/next_s.jpg" style="cursor:hand"></td>
<td rowspan="2"><img src="image/i_27.jpg" width="26" height="18" border="0" ></td>
<td style="width:1;height:7"></td>
</tr>
<tr>
<td><img src="image/i_01.jpg" width="235" height="11" border="0" ></td>
<td style="width:1;height:11"></td>
</tr>
<tr>
<td rowspan="2" colspan="3"><img src="image/i_02.jpg" width="342" height="22" border="0" ></td>
<td rowspan="2"><img src="image/i_03.jpg" width="34" height="22" border="0" ></td>
<td rowspan="2"><img src="image/i_04.jpg" width="60" height="22" border="0" ></td>
<td rowspan="2"><img src="image/i_05.jpg" width="26" height="22" border="0" ></td>
<td style="width:1;height:2"></td>
</tr>
<tr>
<td colspan="13"><img src="image/i_06.jpg" width="282" height="20" border="0" ></td>
<td style="width:1;height:20"></td>
</tr>
</table>
<img id="li" style="position:absolute;top:17;left:281;width:463;height:374">
<div id="LoadBr"><div style="position:absolute;top:0;left:0;width:760;height:430;background:black;filter:Alpha(Opacity=50)"></div><embed src="image/loading.swf" style="position:absolute;top:180;left:280"quality=high wmode=transparent width=200 height=150 type=application/x-shockwave-flash></embed></div>
</body>
</html>


一些说明：
程序的总体概念比较清晰，不必多说。下面说一点细节问题。
T_lit=new Array(0,7,36,43,71) PPT切换时刻的RM视频播放时间，单位为秒。
I_lit=new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg") PPT文件做成图片后的名称。
PageLit=new Array() 页面上显示的多行信息文本。
PageUrl=new Array() 点击信息文本后导航到的网页文件。
PageRm="rm/堆排序.rm" 视频文件所在位置。
<object id="Player" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa" width=237 height=178>
<param name="controls" value="imagewindow">
<param name="autostart" value="-1">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000">
</object>
此为网页中插入Realplayer插件的代码。
其中值得注意的是将其命名为Player。在其它一些代码中可以看到，很多地方都用到了Player，比如Player.getposition()，Player.setposition()，Player.doplay()等等，这些都是Realplayer提供的相应的编程接口函数，从其函数名称已经可以看出函数的用途。其它一些代码都是围绕这些接口函数展开的。

iteye_17686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值