WordPress安裝使用Flowplayer簡(jiǎn)易指南

發(fā)布時(shí)間：2012-11-12 10:55:50 作者：佚名

在D大的blog上看到個(gè)很不錯(cuò)的Flash播放器。后來(lái)得知是Flowplayer播放器，遂成本文

本文是簡(jiǎn)單易懂的現(xiàn)代魔法系列文章的第二彈~

一、Flowplayer簡(jiǎn)介
FlowPlayer 是一個(gè)用Flash開(kāi)發(fā)的在Web上的視頻播放器，可以很容易將它集成在任何的網(wǎng)頁(yè)上。支持HTTP以及流媒體傳輸。

最新版本為5.1.1，最新版本使用純 HTML5 + CSS3 實(shí)現(xiàn)的原生 VIDEO 標(biāo)簽，自動(dòng)降級(jí)為 Flash 播放器，專門為現(xiàn)今的瀏覽器設(shè)計(jì)，旨在提供良好的性能和用戶體驗(yàn)。

最新版本大D在使用中遇到的問(wèn)題比較多，于是轉(zhuǎn)為使用Flowplayer 3.2.15版本。

Flowplayer官網(wǎng)：http://flowplayer.org/

二、Flowplayer下載
這里大D只提供3.2.15版本的下載，5.11版請(qǐng)到官網(wǎng)下載。

腳本之家打包下載地址 http://www.dbjr.com.cn/jiaoben/20974.html

三、Flowplayer安裝
首先解壓文件，得到

•flowplayer.controls-3.2.14.swf
•flowplayer-3.2.11.min.js
•flowplayer-3.2.15.swf
得到以上三個(gè)文件，在/wp-content/plugins文件夾下建立一個(gè)名為flowplayer的文件夾，并把上面解壓出來(lái)的三個(gè)文件上傳到新建的這個(gè)flowplayer文件夾。

打開(kāi)主題的header.php，在</head>前面添加如下語(yǔ)句：

復(fù)制代碼

代碼如下:

至此，F(xiàn)lowplayer安裝完畢，下面來(lái)說(shuō)一下使用。

四、使用Flowplayer

首先要說(shuō)明一點(diǎn)，你要在整篇blog文章寫完之后再添加Flowplayer的調(diào)用代碼。
否則會(huì)出現(xiàn)一些奇怪的問(wèn)題，諸如無(wú)法進(jìn)入可視化編輯環(huán)境等。

在寫完文章之后，在需要添加視頻的地方寫入以下代碼（HTML編輯模式下添加）：

復(fù)制代碼

代碼如下:

<a id="playerID" style="display: block; width: 寬度px; height: 高度px;" href="地址"></a><script _fcksavedurl=""地址"></a><script" type="text/javascript" language="JavaScript">flowplayer("playerID", "/wp-content/plugins/flowplayer/flowplayer-3.2.15.swf",{clip:{url:'地址',autoPlay: false, autoBuffering: true}});</script>
<a id="playerID" style="display: block; width: 寬度px; height: 高度px;" href="地址"></a><script type="text/javascript" language="JavaScript">flowplayer("playerID", "/wp-content/plugins/flowplayer/flowplayer-3.2.15.swf",{clip:{url:'地址',autoPlay: false, autoBuffering: true}});</script>

其中，playerID要保持一致，地址為視頻的絕對(duì)地址。發(fā)個(gè)例子吧

復(fù)制代碼

代碼如下:

<a id="player01" style="display: block; width: 576px; height: 423px;" href="/wp-content/upload/2012/11/123.flv"></a><script type="text/javascript" language="JavaScript">flowplayer("playerID", "/wp-content/plugins/flowplayer/flowplayer-3.2.15.swf",{clip:{url:'/wp-content/upload/2012/11/123.flv',autoPlay: false, autoBuffering: true}});</script>
<a id="player01" style="display: block; width: 576px; height: 423px;" href="/wp-content/upload/2012/11/123.flv"></a><script type="text/javascript" language="JavaScript">flowplayer("playerID", "/wp-content/plugins/flowplayer/flowplayer-3.2.15.swf",{clip:{url:'/wp-content/upload/2012/11/123.flv',autoPlay: false, autoBuffering: true}});</script>

五、添加后臺(tái)調(diào)用按鈕

像大D這種懶人，肯定是記不住調(diào)用代碼的寫法。

于是弄了一個(gè)HTML編輯模式的后臺(tái)按鈕，如下圖：

添加后臺(tái)調(diào)用按鈕方法：

1、在主題functions.php文件中添加如下代碼：

復(fù)制代碼

代碼如下:

add_action('admin_print_scripts', 'my_quicktags');
function my_quicktags() {
wp_enqueue_script(
'my_quicktags',
get_stylesheet_directory_uri().'/my-quicktags.js',
array('quicktags')
);

2、新建一個(gè)名為my-quicktags.js的文件，并寫入以下代碼：

復(fù)制代碼

代碼如下:

QTags.addButton( 'Video', 'Video', '<a id="playerID" style="display: block; width: 寬度px; height: 高度px;" href="地址"></a><script type="text/javascript" language="JavaScript">flowplayer("playerID", "/wp-content/plugins/flowplayer/flowplayer-3.2.15.swf",{clip:{url:\'地址\',autoPlay: false, autoBuffering: true}});</script>','' );
//QTags.addButton( 'my_id', 'my button', '\n</span>', '</span>\n' );
//這兒共有四對(duì)引號(hào)，分別是按鈕的ID、顯示名、點(diǎn)一下輸入內(nèi)容、再點(diǎn)一下關(guān)閉內(nèi)容（此為空則一次輸入全部?jī)?nèi)容），\n表示換行。

如果你用的主題文件中有這個(gè)文件，那么直接將上述代碼寫進(jìn)my-quicktags.js文件即可。
已經(jīng)寫好的my-quicktags.js文件下載地址（本文件添加了“下一頁(yè)”，“h4”，“h6”，“Video”四個(gè)按鈕）：my-quicktags-jb51.rar

六、參考文獻(xiàn)

http://codex.wordpress.org/Quicktags_API

http://flash.flowplayer.org/documentation/installation/index.html

http://www.solagirl.net/wordpress-path-related-functions.html

原文：bugsong.net