中畫網

標題: 播放器代碼教程 [打印本頁]

作者: 小酷    時間: 2008-1-9 00:05
標題: 播放器代碼教程
第一步,加播放器的代碼(不用別人做的JS播放器),我只要最簡單的。
其實要說最簡化的播放背景音樂的代碼,則下面的代碼是最簡單的了
<embed src="背景音樂網址">

呵呵,我用的是:
<embed src="背景音樂網址" autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" >
loop="-1" 表示無限次循環播放,可設置播放次數,用具體數字代替即可,比如我希望它播放兩次,則loop="2"
controls="ControlPanel"這個控制選項可省略
width="0" height="0"表示隱藏播放。想設置播放器的大小,設置值即可,比如width="480" height="25"
我是放在文章里的,所以直接把文章切換到代碼模式粘貼上剛才的代碼就可以了。
第二步,實現連續播放多首歌曲

播放器會弄了,用百度或者搜刮找到歌曲的地址,替換代碼中“背景音樂網址”就可以播放歌曲了。但是這樣只能是一首歌曲啊。沒關系,記得當初用winamp或者千千靜聽的時候不是有個播放列表嗎?對,用m3u格式。新建一個記事本文檔,在里面寫上如下代碼保存為“任意名.m3u”:
<ASX version ="3.0">
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網址1"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網址2"/>
</Entry>
<Entry>
<Ref href = "以.mid.wma.mp3等結尾的音樂網址3"/>
</Entry>
需要更多歌曲可重復“<Entry>……</Entry>”代碼
</ASX>

嗯,然后?把保存的文件(例如musci.m3u)上傳到你的個人主頁或者隨便其他水木地方(我是傳到googlepage的)。再把m3u的IE地址放到第一步中的“背景音樂地址”處就可以實現連續播放的目的了。不信,試試看。

因為當你打開博客的時候,雖然不能自動播放,但是播放器首先要加載第一首歌曲,當遇到錯誤無法識別的歌曲地址時就會自動跳轉到第二首而播放第二首歌曲。

不過這里需要注意的是,第二首歌曲的地址里不能帶有漢字,否則跳轉到第二首歌曲的時候它也不會自動播放,第三首,第四首歌曲之后就沒限制了,只要歌曲地址對就行。

黑色播放器
<CENTER><EMBED style="FILTER: xray()"
src=http://doom.tzinfo.com/n0wAy/InTheWaitingLine.mp3
width=300 height=50 type=audio/mpeg Pausini--Volevo Dirti
Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1"
volume="0" autostart="true" loop="-1" 32-01.wma Path Winding
The - Kern></EMBED></CENTER>
棕色播放器
<CENTER><EMBED style="FILTER: invert()" src=音樂連接地址 width=300
height=50 type=audio/mpeg Pausini--Volevo Dirti Che Ti
Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1" volume="0"
autostart="true" loop="-1" 32-01.wma Path Winding The -
Kern></EMBED></CENTER>
閃光播放器外加蒙朧化
<CENTER>
<TABLE style="BORDER-RIGHT: #f1dda1 2px ridge; BORDER-TOP:
#bdb76b 2px ridge; BORDER-LEFT: #f1dda1 2px ridge;
BORDER-BOTTOM: #bdb76b 2px ridge; BACKGROUND-COLOR: white"
borderColor=#ffffff cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B2686448.4.gif
border=0><TBODY><TR><TD width=300 height=20 cellPadding="0"
cellSpacing="0"><TABLE align=center border=0><TBODY><TR><TD
style="FILTER: alpha(opacity=60,style=3)">
< align=center><EMBED style="FILTER: invert(); WIDTH:
290px; HEIGHT: 28px" src=音樂連接地址 type=audio/x-ms-wma
autostart="true" loop="-1"
volume="0"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER>
花播放器
< align=center><TABLE style="BORDER-COLLAPSE: collapse"
height=24 cellSpacing=0 cellPadding=0 width=300 align=center
background=http://bbs.muwen.com/fileuploaddir/4B258184577.gif
border=1><TBODY><TR><TD style="FILTER:
Chroma(Color='#000000')">< align=center><EMBED src=音樂連接地址
width=300 height=24 type=audio/mpeg Pausini--Volevo Dirti
Che Ti Amo.WMA Louie.mp3 louie.mp3 ShowStatusBar="1"
volume="0" autostart="true" loop="-1" 32-01.wma Path Winding
The - Kern></P></TD></TR></TBODY></TABLE>
播放器蒙朧化
<P align=center><TABLE style="FILTER: Alpha(Opacity=100,
FinishOpacity=0, Style=3, StartX=20, StartY=40, FinishX=0,
FinishY=0)gray(); WIDTH: 300px; HEIGHT:
60px"><TBODY><TR><TD><EMBED src=音樂連接地址 width=270 height=40
type=audio/mpeg loop="true" autostart="true" panel="0">
</TD></TR></TBODY></TABLE></P>
兩端朦朧化
<CENTER><TABLE style="FILTER: Alpha(Opacity=300,
FinishOpacity=0, Style=2, StartX=20,StartY=30, FinishX=0,
FinishY=0)invert()"><TBODY><TR><TD><EMBED style="FILTER:
xray()" src=音樂地址 loop="true" width=300 height=30
type=audio/mpeg
showstatusbar="0"></EMBED></TD></TR></TBODY></TABLE></CENTER>
再補充一些
以前經常有人會問我如何在頁面中加入播放器?對于一些新手來說,可以在編輯時點擊插入播放器而無需用到HTML代碼。但是,千篇一律的款式是不是會讓人久而生厭呢?其實,要想讓你自己的網頁變得生動,一款漂亮的,合乎頁面整體設計的播放器就顯得極其重要了。現在為你推薦一些漂亮的播放器,你只需復制代碼放入你的文章里,就可以使用了。
一、幾款最常用的播放器

代碼如下
(EMBED src="歌曲地址" width=300 height=50 type=audio/mpeg
loop="-1" autostart="FALSE" volume="0")

代碼如下
(EMBED style="FILTER: invert()" src="歌曲地址" width=300 height=50
type=audio/mpeg volume="0" autostart="TRUE" loop="true")
代碼如下
(EMBED style="FILTER: Xray" src=歌曲地址 width=300 height=05
type=audio/mpeg loop="-1" autostart="false" volume="0")

代碼如下
(EMBED style="FILTER: GRAY()" src="歌曲地址" width=300 height=45
type=audio/mpeg loop="-1" autostart="true" volume="0")
重要提示:
1 復制時務必將(EMBED。。。)前后的括號()替換成<>。這點非常重要。
2 WIDTH代表播放器寬度,HEIGHT代表高度,后面的數值可依自己喜好進行調整。
3 AUTOSTART="TRUE" 這里TRUE代表自動播放,如果換成FALSE則代表手動播放。
二、裝飾美化你的播放器
有了基本的款式后,我們就可以根據自己的想象力,巧用HTML的表格,根據自己的圖片素材,裝飾美化自己的播放器啦。只要你有足夠的創意,調整代碼,就可以得到各式各樣的播放器。這里拋磚引玉先介紹幾款。
首先我們可以為黑色播放器加上一個邊緣
(中間綠底的部分為原黑色播放器代碼)
 

<TABLE style="BORDER-RIGHT: #000000 3px dashed; BORDER-TOP:
#000000 3px dashed; BORDER-LEFT: #000000 3px dashed;
BORDER-BOTTOM: #000000 3px dashed" cellSpacing=0 cellPadding=0
bgColor=#00000>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#000000 align=center border=1>
<TBODY>
<TR>
<TD><P align=center><EMBED style="FILTER: Xray"
src=http://cherry.jazzsky.com/LIU/all_about_you.wma width=300
height=45 type=audio/mpeg volume="0" autostart="false" loop="-
1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
當然也可以為藍色播放器加上粉色邊緣
(中間粉底部分為原藍色播放器代碼)
 

 
代碼如下
 
<TABLE style="BORDER-RIGHT: #ff69b4 3px dotted; BORDER-TOP:
#ff69b4 3px dotted; BORDER-LEFT: #ff69b4 3px dotted;
BORDER-BOTTOM: #ff69b4 3px dotted" cellSpacing=0 cellPadding=0
align=center bgColor=white>
<TBODY>
<TR>
<TD><TABLE borderColor=#ff69b4 align=center bgColor=#ffccf5
border=2>
<TBODY>
<TR>
<TD style="FILTER: alpha(opacity=100,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg volume="0" autostart="false"
loop="-1"></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
還可以將播放器置于一個單獨的表格里,并加上表格的透明特效,播放器上的花紋就是表格的底圖。(中間紫底部分的為原藍色播放器代碼)
 
 
 
代碼如下:
<TABLE borderColor=#4f3256 align=center
background=http://upload.yourblog.org/20057/kaka967.20050722115212.png
border=1>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=50,style=3)">
<P align=center> <EMBED src=歌曲地址 width=300 height=45
type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE>
還可以利用動態的GIF背景做成動態播放器
(中間藍底部分為原來的灰色播放器代碼
 
 
代碼如下:
<TABLE borderColor=#dee4fe cellSpacing=3 cellPadding=0
background=http://www.yhbbs.com/UploadFile/2004-12/2004123023101352.gif
border=2>
<TBODY>
<TR>
<TD>
<TABLE align=center border=0>
<TBODY>
<TR>
<TD style="FILTER: alpha (opacity=60,style=3)">
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=45 type=audio/mpeg volume="0" autostart="false"
loop="-1"> </P></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE>
甚至還可以將動態背景只在播放器底部運行
中間棕底字體為原灰色播放器代碼
 

 
代碼如下
<TABLE height=40 cellSpacing=0 cellPadding=0 width=300
background=http://bbs.guqu.net/UploadFile/2005-4/20054302075888035.gif
border=1>
<TBODY>
<TR>
<TD>
<TABLE style="FILTER: Chroma (Color='#000000')" height=40
cellSpacing=0 cellPadding=0 width=300 border=0>
<TBODY>
<TR>
<TD>
<P align=center><EMBED style="FILTER: Gray" src=歌曲地址 width=300
height=40 type=audio/mpeg loop="-1" autostart="false"
volume="0"></P></TD></TR></TBODY></TABLE></TD><
/TR></TBODY></TABLE>

這么多五彩繽紛的播放器是不是很吸引你呢?只要你肯花心思,你可以用HTML
表格做成兩層或三層的播放器來,呈現你自己不同于他人的特色。這是一個崇尚個性的年代,模仿固然能讓你找到捷徑,但是創造性才是決定你是否能吸引人的關健。言歸正傳,如果這個貼能讓你有所啟發,就達到我們的本意了。也希望今后能看到更多獨具特色的播放器出現。

作者: 雄杰獨倚    時間: 2008-1-13 18:51
不錯呀~收藏起來用!感謝
作者: 清音王梓    時間: 2008-1-20 21:57
這個帖子不錯!適合新手用做單曲播放!感謝小酷推薦!
作者: 小木喬    時間: 2008-2-26 17:46
好好學習,天天向上。。。。。
作者: 愁緒    時間: 2008-3-18 09:42
很好看!我也下載收藏了!
作者: 香氣襲人    時間: 2008-4-29 13:08
樓主講的好詳細,還有實例,太感謝了,我收藏了,一個一個把它們用在我的帖子里去~~~
作者: 雨中百合    時間: 2008-5-24 23:05
感謝小酷詳細地講解,辛苦了!
作者: 聽風賞月    時間: 2008-5-28 05:02
謝謝,學習并收藏了
作者: 漸行漸淡    時間: 2008-5-31 16:58
偷走了哈~~謝謝~~
作者: suiyiba    時間: 2008-6-11 00:56
收藏了樓主,謝謝了,辛苦了!
作者: 花瓣雨的花雨    時間: 2008-6-22 21:44
謝謝樓主的耐心講解,學習啦。就是看著還是有點暈,如果能應詳細點就更好。比如:音樂地址,是不是我們電腦硬盤放歌曲的目錄啊?
作者: djdj    時間: 2008-7-10 15:18
謝謝~~謝謝,在學習中
作者: 一劍飄香紅    時間: 2008-8-18 09:29
謝謝小酷,我來學習一下
作者: 與你做伴    時間: 2008-8-23 13:09
謝謝~~學習~~
作者: 乃琴    時間: 2008-9-2 23:05
對于新手來說,講解似乎有些深奧,得好好研究下,爭取搞個明白,謝小酷!
作者: 乃琴    時間: 2008-9-2 23:32
記事本保存為M3U格式怎么保存?沒有這個格式啊,實在不明白
作者: 月亮之上    時間: 2008-10-27 23:18
感謝樓主提供了這么多的代碼!學習了!
作者: 雨絲絲    時間: 2008-11-2 11:40
謝謝樓主哦~收藏哦~
作者: 小書童    時間: 2009-3-31 21:09
非常適合咱們這種新手玩 謝謝了
作者: tonehe    時間: 2009-8-5 08:08
經典的教學,COPY下來了
作者: sunyk    時間: 2009-12-1 00:31
好好學習了,謝謝




歡迎光臨 中畫網 (http://www.nujv.cn/) Powered by Discuz! X3.4
主站蜘蛛池模板: 欧美激情中文字幕综合一区| 色777狠狠狠综合| 激情综合亚洲色婷婷五月APP| 亚洲伊人色欲综合网| 自拍三级综合影视| 国产成人精品综合久久久久| 亚洲 欧美 日韩 综合aⅴ视频| 亚洲 欧美 综合 高清 在线| 亚洲狠狠婷婷综合久久蜜芽 | AV狠狠色丁香婷婷综合久久| 久久香蕉综合色一综合色88| 色777狠狠狠综合| 久久婷婷五月综合成人D啪| 综合自拍亚洲综合图不卡区| 激情五月综合综合久久69| 国产成人综合美国十次| 国产香蕉久久精品综合网| 亚洲综合国产精品第一页| 综合久久一区二区三区| 久久婷婷激情综合色综合俺也去| 久久综合国产乱子伦精品免费| 青青草原综合久久| 久久综合偷偷噜噜噜色| 国产精品无码久久综合| 狠狠综合久久AV一区二区三区| 色综合久久综精品| 久久综合狠狠综合久久| 亚洲综合色区在线观看| 亚洲精品第一国产综合境外资源| 久久婷婷是五月综合色狠狠| 国产激情综合在线观看| 狠狠色丁香久久婷婷综合五月 | 婷婷色香五月激情综合2020| 亚洲欧美国产∧v精品综合网| 色综合天天做天天爱| 亚洲中文字幕无码久久综合网| 99精品国产综合久久久久五月天| 亚洲国产成人精品无码久久久久久综合| 区二区三区激情综合| 台湾佬综合娱乐| 色噜噜狠狠成人中文综合|