WordPress安裝使用Flowplayer簡易指南

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

在D大的blog上看到個很不錯的Flash播放器。后來得知是Flowplayer播放器，遂成本文

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

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

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

最新版本大D在使用中遇到的問題比較多，于是轉為使用Flowplayer 3.2.15版本。

Flowplayer官網：http://flowplayer.org/

二、Flowplayer下載
這里大D只提供3.2.15版本的下載，5.11版請到官網下載。

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

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

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

打開主題的header.php，在</head>前面添加如下語句：

復制代碼

代碼如下:

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

四、使用Flowplayer

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

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

復制代碼

代碼如下:

<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要保持一致，地址為視頻的絕對地址。發(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>

五、添加后臺調用按鈕

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

于是弄了一個HTML編輯模式的后臺按鈕，如下圖：

添加后臺調用按鈕方法：

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

復制代碼

代碼如下:

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、新建一個名為my-quicktags.js的文件，并寫入以下代碼：

復制代碼

代碼如下:

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' );
//這兒共有四對引號，分別是按鈕的ID、顯示名、點一下輸入內容、再點一下關閉內容（此為空則一次輸入全部內容），\n表示換行。

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

六、參考文獻

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