当前页面: 开发资料首页 → Javascript 专题 → 网页播放技术的超炫应用实战解析

网页播放技术的超炫应用实战解析

摘要: 网页播放技术的超炫应用实战解析

谱乐专栏是谱乐关于网页播放器的一个系列专题讲座，谱乐视听作为网页播放器的门户网站，必将以最好最全的原创作品奉献与大家。大家在阅读的时候，应该按照发表时间的先后顺序。因为她是一个循序渐进的教案，顺序研究有助于尽快提高你的理解与消化。懂的地方仔细读，不懂的地方硬着头皮读，同时也请大家多提宝贵意见。现在言归正传。

想让你的论坛（网页）超眩超酷吗？想让你的论坛（网页）生动活泼吗？使用谱乐的网页播放器吧。下面谱乐向大家郑重推荐三款，均是经典案例，先切身感受一番如何。

第一款：BBSVisual For Lrc 。演示处 http://aboutplayer.com/bbs/bvl.htm 。特点是兼容 WMP、Real、SWF 及图片等几乎所有媒体格式。可视频、全屏播放，可播放本地媒体。能保存播放列表到本地以随时读取。能根据歌名自动搜索加载同步播放歌词，歌词逐字变色，实现网上卡拉 OK 效果。所见即所得后台管理模式。对歌曲有分类、改名、收藏、搜索等功能。

第二款：AutoHide Player 。演示处 http://aboutplayer.com/autohide_asp 。即自动隐藏播放器。占用系统资源少。

第三款：Aquamp Player 。演示处 http://aboutplayer.com/aquamp 。以前面讲到 playlist.asx 播放列表文件为歌曲清单，HTML 版本适用于所有类型空间。特别是她的网页嵌套技术非常的精彩别致，千万要一睹芳容。

还有一款，谱乐有必要单独推荐，即谱乐制作“即插即用”点歌系统，真正的网上互动哟。适用于 DVBBS、LEADBBS等所有类型论坛（网页）。演示处 http://aboutplayer.com/bbs/dg_bbs.asp 。

其实还有好多款式，嵌入论坛的方式也有六法，谱乐论坛有系统总结。大家可前往查阅详细相关资料。接下来谱乐给大家介绍最基本的播放器论坛嵌套方法，也请大家举一反三。

1、播放器在底部

＜frameset rows="*,25" frameborder="no" border="0" framespacing="0"＞// * 表论坛，25 表播放器的高
＜frame src="论坛地址" name="mainFrame" scrolling="yes"＞// 上
＜frame src="播放器地址" name="bottomFrame" scrolling="no" noresize＞// 下
＜/frameset＞
＜noframes＞＜body＞ | 或＜noframes＞＜/noframes＞
＜/body＞＜/noframes＞ | 效果自己测试比较，谱乐建议用后者

2、播放器在顶部

＜frameset rows="25,*" frameborder="no" border="0" framespacing="0"＞
＜frame src="播放器地址" name="topFrame" scrolling="no" noresize＞
＜frame src="论坛地址" name="mainFrame" scrolling="yes"＞
＜/frameset＞
＜noframes＞＜/noframes＞

3、播放器在左边

＜frameset cols="25,*" frameborder="no" border="0" framespacing="0"＞// 上下是 rows，左右是 cols
＜frame src="播放器地址" name="leftFrame" scrolling="no" noresize＞
＜frame src="论坛地址" name="mainFrame" scrolling="yes"＞
＜/frameset＞
＜noframes＞＜/noframes＞

4、播放器在右边

＜frameset cols="*,25" frameborder="no" border="0" framespacing="0"＞
＜frame src="论坛地址" name="mainFrame" scrolling="yes"＞
＜frame src="播放器地址" name="rightFrame" scrolling="no" noresize＞
＜/frameset＞
＜noframes＞＜/noframes＞

上述四法是论坛、播放器两级嵌套。Aquamp 是三级嵌套，除论坛、播放器外，还有一个中间扩展页。Aquamp 因她所以精彩。具体方法同上，想继续了解的朋友，请到谱乐论坛查阅相关专题。

前面讲了点播文字链接弹出新窗口。本讲主题是：文字链接与播放器窗口处于同一页面。请点下面的文字链接观看效果。

代码如下：

＜table height="310" cellSpacing="0" cellPadding="0" width="375" border="0"＞
＜tbody＞
＜tr＞
＜td width="375" bgcolor="#cccccc" height="310"＞
＜center＞＜span id="trymedia"＞
＜object align=middle classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95'
codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,5
2,701 width=375 height=300 id=nstv type=application/x-oleobject standby='Loading Microsoft Windows Media Player components...'＞＜param name='AudioStream' value='-1'＞＜param
name='AutoSize' value='0'＞＜param name='AutoStart' value='-1'＞＜param name='AnimationAtStart'
value='-1'＞＜param name='AllowScan' value='-1'＞＜param name='AllowChangeDisplaySize' value='-
1'＞＜param name='AutoRewind' value='0'＞＜param name='Balance' value='10'＞＜param name='BaseURL'
value＞＜param name='BufferingTime' value='5'＞＜param name='CaptioningID' value＞＜param
name='ClickToPlay' value='-1'＞＜param name='CursorType' value='0'＞＜param
name='CurrentPosition' value='-1'＞＜param name='CurrentMarker' value='0'＞＜param
name='DefaultFrame' value＞＜param name='DisplayBackColor' value='0'＞＜param
name='DisplayForeColor' value='16777215'＞＜param name='DisplayMode' value='0'＞＜param
name='DisplaySize' value='4'＞
＜param name='Mute' value='0'＞
＜param name='PlayCount' value='1'＞
＜param name='PreviewMode' value='0'＞
＜param name='Rate' value='1'＞
＜param name='SelectionStart' value='0'＞
＜param name='SelectionEnd' value='0'＞
＜param name='TransparentAtStart' value='0'＞
＜param name='Volume' value='0'＞
＜param name='WindowlessVideo' value='0'＞
＜param name=Filename value=＞
＜/object＞
＜script language="JavaScript"＞
function show_media(){
var media_url=window.event.srcElement.href; //*media_url=用户所点链接值
trymedia.innerHTML="＜object id=mediaplayer align=middle classid='CLSID:22d6f312-b0f6-11d0-
94ab-0080c74c7e95' codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,5
2,701 width=375 height=300 type=application/x-oleobject standby='Loading Microsoft Windows Media Player components...'＞＜param name='AudioStream' value='-1'＞＜param name='AutoSize'
value='0'＞＜param name='AutoStart' value='-1'＞＜param name='AnimationAtStart' value='-
1'＞＜param name='AllowScan' value='-1'＞＜param name='AllowChangeDisplaySize' value='-1'＞＜param
name='AutoRewind' value='0'＞＜param name='Balance' value='10'＞＜param name='BaseURL'
value＞＜param name='BufferingTime' value='5'＞＜param name='CaptioningID' value＞＜param
name='ClickToPlay' value='-1'＞＜param name='CursorType' value='0'＞＜param
name='CurrentPosition' value='-1'＞＜param name='CurrentMarker' value='0'＞＜param
name='DefaultFrame' value＞＜param name='DisplayBackColor' value='0'＞＜param
name='DisplayForeColor' value='16777215'＞＜param name='DisplayMode' value='0'＞＜param
name='DisplaySize' value='4'＞＜param name='Mute' value='0'＞＜param name='PlayCount'
value='1'＞＜param name='PreviewMode' value='0'＞＜param name='Rate' value='1'＞＜param
name='SelectionStart' value='0'＞＜param name='SelectionEnd' value='0'＞＜param
name='TransparentAtStart' value='0'＞＜param name='Volume' value='0'＞＜param
name='WindowlessVideo' value='0'＞＜param name=Filename value="+media_url+"＞＜/object＞"; //*
引用用户所点链接值,播放media
}
＜/script＞
＜br＞
＜script language="JScript"＞
function show(Text){
info.innerHTML = '＜p align="center" style="filter:shadow
(color=#000000,direction=110);height:14;"＞＜font color=ffffff＞当前播放歌曲: ＜/font＞＜font
color=#ffffaa＞' + Text.innerText + '＜/font＞＜A style="cursor: hand;"
onclick="mediaplayer.displaysize=3"＞＜font color=ffffff＞全屏播放[ESC返回]＜/font＞＜/A＞＜/P＞';
}
＜/script＞
＜/span＞＜span id="info" style="FONT-SIZE: 14px ;filter:shadow
(color=#000000,direction=110);height:14;"＞＜/span＞＜/center＞＜/td＞
＜/tr＞
＜/tbody＞
＜/table＞
＜a onfocus=blur() onclick="show_media();show(this);return false"
href="http://www.crystalcg.com/new/xinshang/002/asf/snow.wmv"＞汤灿 → 雪意＜/a＞

有问题请到谱乐论坛发表或随时随地在线咨询谱乐。

到这篇专题为止，谱乐关于网页播放器的一些基础知识和制作技术的讲解就要告一段落了。许多朋友在谱乐论坛上经常问及这怎么做，那怎么做？能否这样，能否那样？不劳而获的心态非常严重，根本就不想自己去尝试一下。谱乐这里要说的是：网页播放器的内容非常的广泛而丰富，谱乐不可能面面俱到。谱乐带给大家的只能是一些基本的方法与技巧，许多具体的功能或需求还得寄希望于朋友们亲自去实践和探索。你自己最清楚自己想要什么！

</td> </tr> </table>
↑返回目录
前一篇: 为网页加播放器实现在线播放的代码实例
后一篇: 网页播放技术-鼠标拖动歌词定位播放