跳至主要内容

EXOBUD MPⅡ網頁播放器插入BLOG裡(没什么技术含量)

相信很多人會羨慕blog上面有個播放器,不停的播放自已喜歡的音樂,接下來要介紹這個播放器給大家,可以放在自己的網誌上面。

首先,先感謝【T-Eye第三只眼】的站長,有耐心的回答我所有問題,並且寫出這篇原創的教學文章。

第二個感謝的是:【網站媒體播放器-翠竹網站】的站長-辣辣箭!非常熱心且免費線上教學!

第三個感謝的是:【秋名飄來的八六】,沒有他的繁體文章說明,可能到現在還在找尋繁體網頁說明呢!

以下我把T-Eye第三只眼的文章,打成繁體中文,好讓大家閱讀.....


(本文系作者原創,轉載請註明出自 T-Eye 第三只眼 http://bobotalk.blogbus.com)

在此之前,風曾專門寫過一篇日誌——《系列教程之三:關於PP播放器》——專門討論網頁中插入播放器的問題。但由於時間的關係,那篇日誌介紹的過於簡陋了,以至於許多朋友看過以後心理仍然沒什麼概念。特此,就如何在博客中插入漂亮的播放器這一專題,T-Eye在此作進一步的討論,也順便跟大家共享一下在自己博客中插入播放器的經驗。

首先需要聲明的幾點是:

1、本文中提及的網頁播放器均為ExoBUD MP(II)。其原創作者為韓國作者庾珍雄(Jinwoong Yu),簡體中文化作者為雨網國際的liyu(yune_lee)。在此向他們的辛勤勞動表示感謝!如有使用簡體中文版的ExoBUD MP(II),請盡可能保留這兩位作者的信息。

2、本文僅探討在博客(BloG)中,如何插入網頁播放器。與個人網站不同的是,目前大部分國內BloG托管商都不提供完全的首頁定制上傳,而只是提供模板讓你修改——因此,以頁面框架方式插入播放器變得不可行(如果有朋友找到此種插入方法,請不吝共享);所以,本文所討論的插入網頁播放器的辦法是以內嵌框架機制(iframe)實現的

3、為了方便朋友們,T-Eye在此提供5種風格的播放器下載——前四種是橫條方式的,主要應用於頁面頂部或者底部以橫條方式插入;第五種是在RUBY面版的基礎上,風修改成的折疊式,便於在側欄狹小的空間插入。需要說明的是,在此只是為了方便大家才提供下載;如由此而涉及版權問題,敬請告知。下表為網頁播放器下載地址和效果演示地址:

             名       稱                                           下載地址                               效果演示                   
Exobud MP的標準版本              點擊下載           演示地址
Exobud MP II 蘋果Mac版              點擊下載           演示地址
Exobud MP II CSS自由創作版              點擊下載           演示地址
Exobud MP II RUBY版              點擊下載           演示地址
Exobud MP II T-Eye修改版           點擊下載         演示地址

 咋看起來在博客中插入播放器蠻複雜的,其實不會的,只要稍微懂些基本的html知識就行(不懂也沒關係,碰上了上Google搜索就是了)。但最初因找不到簡易的教程,倒也走了不少彎路。因此,為了給大家提供借鑒,讓更多的人能夠順利的在自己的博上插入漂亮的播放器,風把自己摸索出來的經驗總結如下:

一、做好前提工作

(一)下載播放器

本文已經提供了播放器的下載及演示地址。大家下載之前,可以先行點擊演示地址預覽各種風格的播放器效果。選擇你需要的那一款,點擊下載地址Down到你自己的硬盤上就是了。下載下來後看看,這個壓縮文件的名字是一串數字吧?把它名字改成exobud_mp 。然後解壓縮,產生一個名為exobud_mp的文件夾,裡邊有多個文件,找到這個文件——exobud.htm——雙擊它,就可以在瀏覽器中預覽效果了呵呵。

(二)申請好放置播放器的空間

目前國內比較穩定的是中聯,有100M的免費空間,而且沒有任何廣告,支持ftp,大家可以到中聯免費主頁空間這個申請頁面去申請。申請後要注意記住自己的用戶名密碼。它審核挺快的,但是根據我的經驗好像審核完畢後不會主動給你發郵件通知,所以你要主動的上去查看是否已經申請通過了。如果通過了,請牢記它提供給你的主頁空間的訪問地址,比如我申請下來的主頁地址是: http://lamble.go3.icpcn.com/ ——後面就派上用場啦

二、個性化播放器

(一)播放參數設置

在你剛才解壓的那個文件夾裡找到exobudset.js這個文件,用記事本打開。打開之後有一大堆文字對吧,不要慌。從上往下仔細看,它是按照各個功能條目進行解釋的。因為具體的各個功能條目已經在裡邊解釋的非常清楚了,在此就不再贅言。

需要提醒的是,只有形如「var blnAutoStart = true;」之類的語句才會起作用,你需要做的只是按照上面的解釋修改「=」號後面的值——「true」 或者是「false」——就這麼簡單。

還有點需要指出的是,smi的歌詞並不普及,若非特殊需要,可將字幕功能那一行值設為「false」。

(二)播放清單設置

在你剛才解壓的那個文件夾裡找到exobudpl.js這個文件,用記事本打開。老實說,這個文件裡邊作者的解釋寫的有些亂,風當時費老勁才搞明白。其實沒那麼複雜。因為之前不推薦大家使用字幕功能,因此,在這裡就省了許多事。大家按照那裡邊的一般設定格式設定播放清單就行了。

舉個例子:mkList("http://88ba.nease.net/dandan/sg.mp3","Secret Garden-半生緣");

這條語句的意思就是說:這首歌的標題是「Secret Garden-半生緣」;播放這首歌時,播放器會到你指定的歌曲存放地址「http://88ba.nease.net/dandan/sg.mp3 」去讀取——如此設定,你的播放清單裡就有「Secret Garden-半生緣」這首歌了。

因此,相應的,把你想要設定的歌曲網址和名字放在mklist後括號裡邊引號裡的對應位置就行了。歌曲的網址在百度、sogua.com上都可以搜索到(選取地址的原則是,在不影響音質的情況下,盡量選容量比較小的,wmv的一般會更適合;midi也行)。

現在就動手做你自己的清單罷:用記事本打開exobudpl.js這個文件,把原來文檔裡的文字從「<!--」後的第二行起全部刪除,然後按照「mkList(" http://88ba.nease.net/dandan/sg.mp3","Secret Garden-半生緣");」這種格式逐一添加你要的歌曲。所有的歌曲(mklist行)添加完畢之後,你在最底下一行加上「//-->」表示結束——注意,我這裡為了強調,都打上了後色引號(「」),實際操作的時候要把這對紅引號去掉。

註:後來風重新做了一個播放清單樣本文件,已經整合到在日誌中提供下載的播放器壓縮包中了,修改後的樣本清單(exobudpl.js)條理很清楚,相信大家一看就明白了!照那個格式寫就錯不了的呵呵

附:一般免費空間都不讓你上傳容量較大的文件,而一般的mp3都有3m左右,所以最好是在網上找地址放進去;當然,如果你有比較小的音樂文件,那可以把它放入解壓文件夾下的music文件夾。假設你放入music裡的是一首標題為「Only Time」,文件名稱為「onlytime .wmv」的歌,那麼它的調用格式是:mkList("./music/onlytime.wmv ","Only Time"); 其他依此類推。

(三)修改播放器及播放清單面板(這一步僅針對熟悉HtmL源代碼的朋友,不熟悉者可跳過不看)

如果你覺得此處提供下載的播放器面板仍然不符合你自己的頁面要求——比如播放器太長或者太短、顏色太暗或者太艷等無法跟博客風格合一,或者說你自己有更好的面板配色方案。那麼你可以自行動手修改播放器面板——你可以用網頁編輯器打開剛才解壓的那個文件夾裡的exobud.htm這個文件,進行細細的修改。這個文件引用的圖片都放在解壓文件夾下的img文件夾裡邊。播放器面板——無論是圖案還是顏色或者大小,都是可以調整的——但操作起來比較麻煩,修改的時候要注意隨時預覽並保存。因此建議對代碼不熟悉的朋友採取現成的播放器面板。

同理,你也可以修改播放清單的面板佈局——用網頁編輯器打開剛才解壓的那個文件夾裡的exobudpl.htm這個文件。還是那個建議,對代碼不熟悉的朋友最好採取現成的播放器清單面板。

三、如何在博客中插入網頁播放器

當你前面的工作已經全部做好之後,那麼先雙擊exobud.htm在瀏覽器中預覽一下,如果沒有問題,那麼就可以進行這關鍵的最後一步了;如果出現網頁錯誤之類的提示,那請再仔細檢查一下哪一步出現了問題,把問題找出來消滅掉。一般而言,如果沒有去修改播放器面板,即第二部分第三步涉及的問題,預覽都是不會出現問題的。好了,檢查完畢,我們就進行下一步:

(一)上傳到已經申請好的主頁空間

如果該空間能夠允許你用ftp上傳,那麼最好不過了。用服務商提供給你的ftp用戶名和密碼,把剛才解壓並修改好文件的那個文件夾(exobud_mp)整個上傳上去。因為文件都很小,很快就可以傳完。傳完之後,我們需要預覽一下在遠程的效果如何。如果遠程能夠預覽,那麼就可以進行下一步了。

預覽的方式是這樣子的:在瀏覽器地址欄裡輸入你所申請的主頁空間訪問地址,比如我的是http://lamble.go3.icpcn.com/ ,然後在最後面加上後面引號裡的內容「exobud_mp/exobud.htm」——這個用於定位你主頁空間裡的網頁播放器文件位置——因此,完整的預覽地址就是 http://lamble.go3.icpcn.com/exobud_mp/exobud.htm ;如果在瀏覽器裡,能夠順利的讀取出你自己的播放器頁面來,那麼你距離成功僅有一步之遙了,記住該讀取地址,比如我的就是「 http://lamble.go3.icpcn.com/exobud_mp/exobud.htm

(二)在Blog中插入網頁播放器

這個地方需要你具有一些基礎的HtmL知識,不過不會也沒有非常大的關係,嘗試一下就都出來了呵呵

先在你的Blog裡找準你要將播放器插入的確切位置,對應到該位置所在的源代碼。然後在這個位置為播放器頁面留出一定的空間,這個空間可以用層(div)或者表格形式來實現,一般而言,長條形狀的播放器會需要你留出640~760px(像素) 的寬度(也就是width為640px~760px),20~25px(像素) 的高度(也就是說height為20px到25px)。但不要死搬書,具體要依據你自己博客結構自行調整。

內嵌機制的源代碼如下:

<IFRAME id=iframe1 name=iframe1 marginWidth=0 marginHeight=0 src=" http://lamble.go3.icpcn.com/exobud_mp/exobud.htm" frameBorder=0 width=195px scrolling=no height=90></IFRAME>

其中,綠色部分就改成你自己的網頁播放器所在的地址罷——就是前一步驟讓你記住的,在瀏覽器裡調試過,能夠讀出播放器頁面來的那個地址;width和height的具體數值需要你自己依據實際情況自行調整。

(如果不懂這些基本的代碼涵義,你上搜索引擎去查一下罷。我就不在這裡囉嗦了)

把這段代碼放在你博中已經預留出來的那部分空間對應的代碼區域裡,保存後,重新打開你自己的博(有些博需要重新發佈才能看到效果,比如blogbus),看到BloG頁面上出現一個漂亮的網頁播放器了嗎,同時是不是聽到音箱裡一陣傳來悅耳的音樂聲了呢?

很激動罷……祝賀你,成功了呵呵:)

-------------------------------------------------------------->>

PS:以上是T-Eye第三只眼,站長-風寫出來的教學文章,希望能幫助許多想把播放器放在blog上面的朋友們。

附帶一提,下一篇日誌會告訴其他朋友,還有另個網站可供下載播放器,因為上面的播放器有的已經不提供了,所以大家可以到另個站看看。

评论

此博客中的热门博文

How to Design a Store Front Sign

In this Article we will talk about designing a store front for a business. What color or size should your Letters & designs be? What to put on your sign and why?, then be ready to Get in touch with sign people and get your best deal. Large lettering with out a front sign could save you time and money Do your products have a special shape or color to emulate on your sign? Kodak is always in yellow and black, Coca-Cola white on red, Etc. Muffler places, have a sign in the shape of a muffler. your phone number on the store front some place, but not on the identification sign, (door, or window) Your Product & logos can be arranged on the front sign, or window. Not on the Pole sign, Store hours & phone number could fit in your design and by using the product color, it could add product recognition & enhance your design. Suppliers may provide plenty of advert...

How to Make Money from Home Posting Links With No Out of Pocket Expense

Many people are earning money working from home just posting links on a blog, a website, or on well organized Social network marketing website. Anyone can earn substantial income by knowing what to do, where to do it, and how to do it. This article is designed around the Know How concepts to help people without that knowledge to set up their Blogs or Websites to achieve goal. Money is a medium of exchange that brings financial success TRAFFIC EXCHANGE ACCOUNT Log into your website or blog account and place the adsense code into the html document. Then save your document. Upload you website or blog to the internet following any instruction you received from your webmaster. Remember that your webmaster host your website or blog absolutely free. You must publish your site or blog for changes to take place. You now need free traffic resources to advertise and promote your new blog...

找到一个可以替代ghs.google.com的地址

用Goole Blogger的自定义域名功能需要用到 ghs.google.com 做CNAME,或者用ping ghs.google.com 得出的IP做一个A记录.但是,伟大的GFW已经把 ghs.google.com 和部分IP屏蔽在大陆之外.这样的壮举使得我们的自定义域名不能正常访问,或者让你的网页背景.图片被滤掉,精心做成的模板变得惨白不堪. 那么,我们可不可以找一个替代 ghs.google.com 的地址呢?当然能.因为Google是强大的.它有许多有用的IP地址让你去探寻. 对 ghs.google.com 分析研究后发现, ghs.google.com 这台服务器并没有提供实质性的服务,而只是选择访问者访问最快的服务器(Google全球性公司,很多地区都有服务器).我们只要找到其他服务器的IP地址,并且这个IP地址没被屏蔽,那么就成了. 寻找这样的IP地址需要用到tracert命令.即在CMD模式下输入:tracert ghs.google.com ,在已经屏蔽的当下,最后自然得不出结果,这就需要我们使用代理了.使用不同地区的代理运行tracert ghs.google.com 命令. tracert ghs.google.com 的最后一跳会有类似这样的域名: eh-in-f121.google.com 如果在不用代理的情况下,你能ping通这个域名,那么恭喜你,你找到了!现在就可以用这个域名代替 ghs.google.com 设置你的CNAME了,ping出的IP地址可以做A记录,CNAME和A记录,只做其中之一就可以. hs-in-f121.google.com 64.233.179.121 eh-in-f121.google.com 72.14.207.121 bx-in-f121.google.com 66.249.81.121 ik-in-f121.google.com 66.249.91.121 这4个在我所在地区不能使用,而可以使用 tw-in-f121.google.com 72.14.235.121 或者209.85.171.121也可用 下面是一些不断更新的:74.125.43.121 除了使用代理来寻找,也可以通过一些网站提供的功能来寻找这个地址,很方便,就是使用网站提供的Traceroute.这些网站有: h...