网页播放技术的实战解析----- 网页播放器进阶学习之制作篇（2） - 达人(咖啡虫)

2005/06/16 | 网页播放技术的实战解析----- 网页播放器进阶学习之制作篇（2）
类别(网页设计) | 评论(0) | 阅读(222) | 发表于 14:22: 网页播放技术的实战解析

网页播放器进阶学习之制作篇（2）
[ 来源：中国站长学院 | 作者：aboutplayer

在简单网页播放器的基础上，在网页上，如何实现对“播放器”的控制呢。下面谱乐给大家举一个例子。

全屏的功能其实只能在播放的状态下才能实现。此例中，若播放的是音频文件，视频区域出现的将是 WMP 本身附带的动态图纹，也可全屏，但显示器配置不好时，容易长时间黑屏，这时的你要等待，只到全屏动态图纹的出现。这告诉我们，只有在播放真正的视频媒体时，全屏效果才是最佳的。另外还有一个窍门：播放 WMP 类视频媒体“正在播放”状态时，不管你设置与否全屏功能，只要在视频区域双击鼠标，就可实现全屏播放，再双击返回，或按“Esc”键返回。

上例的代码如下：

＜object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="aboutplayer" width="320" height="300"＞
＜param name="URL" value="http://www.xdydm.com/newsite/music1/musics/india/AVSEQ09.wmv"＞
＜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="60"＞
＜param name="mute" value="0"＞
＜param name="uiMode" value="full"＞
＜param name="stretchToFit" value="0"＞
＜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＞
＜param name="enableErrorDialogs" value="0"＞
＜param name="_cx" value="6482"＞
＜param name="_cy" value="6350"＞
＜/object＞
＜/p＞
＜input type=button value=mute onclick=aboutplayer.settings.mute=aboutplayer.settings.mute==true?false:true;time.innerText=aboutplayer.settings.mute==true?'静音':'关闭静音';＞
＜input type=button value=play onclick=aboutplayer.controls.play();time.innerText='播放';＞
＜input type=button value=pause onclick=aboutplayer.controls.pause();time.innerText='暂停';＞
＜input type=button value=stop onclick=aboutplayer.controls.stop();time.innerText='停止';＞
＜input type=button value=mode onclick=aboutplayer.settings.balance=aboutplayer.settings.balance=='100'?'-100':'100';time.innerText=aboutplayer.settings.balance=='100'?'右声道':'左声道';＞
＜br＞
＜input type=button value=vol++ onclick=volup();＞
＜input type=button value=vol-- onclick=voldown();＞
＜input type=button value=fullscreen onclick="if(aboutplayer.playState==3)aboutplayer.fullscreen=1;"＞
＜div id="time" style="background:#f2f3f7;width:245"＞Loading …＜/div＞
＜table style="width:245;height:10px;border:1px black solid;"＞
＜tr＞
＜td id=itcn bgcolor=#f70968 style="width:0"＞＜/td＞
＜td style="width:0"＞＜/td＞
＜/tr＞
＜/table＞
＜script language=javascript defer＞
var volv=aboutplayer.settings.volume;
//注意下行的\'|\'
setInterval("if(aboutplayer.playState==3){time.innerText=aboutplayer.controls.currentPositionString+\'|\'+ aboutplayer.currentMedia.durationString}",1000);
setInterval("if(aboutplayer.playState==3){itcn.style.width=parseInt(245*(aboutplayer.controls.currentPosition/aboutplayer.currentMedia.duration))}",1000);
function volup(){
if (volv＜100){
volv+=5;
aboutplayer.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最大';}
}
function voldown(){
if (volv＞0){
volv-=5;
aboutplayer.settings.volume=volv;
time.innerText=volv;}
else{time.innerText='最小';}
}
＜/script＞

一个扩展型网页播放器的雏形基本上就出来了。

是不是摸到一点门道了？有问题请到谱乐论坛发表或随时随地在线咨询谱乐。; 0

http://kafeichong.5d.cn/

评论Comments