網頁播放技術的超炫應用實戰解析

來源:互聯網
上載者:User
網頁

    譜樂專欄是譜樂關於網頁播放器的一個系列專題講座,譜樂視聽作為網頁播放器的門戶網站,必將以最好最全的原創作品奉獻與大家。大家在閱讀的時候,應該按照發表時間的先後順序。因為她是一個循序漸進的教案,順序研究有助於儘快提高你的理解與消化。懂的地方仔細讀,不懂的地方硬著頭皮讀,同時也請大家多提寶貴意見。現在言歸正傳。

    想讓你的論壇(網頁)超眩超酷嗎?想讓你的論壇(網頁)生動活潑嗎?使用譜樂的網頁播放器吧。下面譜樂向大家鄭重推薦三款,均是經典案例,先切身感受一番如何。

    第一款:BBSVisual For Lrc 。示範處 http://aboutplayer.com/bbs/bvl.htm 。特點是相容 WMP、Real、SWF 及圖片等幾乎所有媒體格式。可視頻、全屏播放,可播放本地媒體。能儲存播放清單到本地以隨時讀取。能根據歌名自動搜尋載入同步播放歌詞,歌詞逐字變色,實現網上卡拉 OK 效果。所見即所得 (WYSIWYG)後台管理員模式。對歌曲有分類、改名、收藏、搜尋等功能。

    第二款: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;"
><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()
href="http://www.crystalcg.com/new/xinshang/002/asf/snow.wmv">湯燦 → 雪意</a>

    有問題請到譜樂論壇發表或隨時隨地線上諮詢譜樂

    到這篇專題為止,譜樂關於網頁播放器的一些基礎知識和製作技術的講解就要告一段落了。許多朋友在譜樂論壇上經常問及這怎麼做,那怎麼做?能否這樣,能否那樣?不勞而獲的心態非常嚴重,根本就不想自己去嘗試一下。譜樂這裡要說的是:網頁播放器的內容非常的廣泛而豐富,譜樂不可能面面俱到。譜樂帶給大家的只能是一些基本的方法與技巧,許多具體的功能或需求還得寄希望於朋友們親自去實踐和探索。你自己最清楚自己想要什麼!



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。