哇寶部落格
Wabow Information Inc. Blog
建立簡易的線上影片播放系統
分類: 技術分享 作者: jaceju
13 八月 2009最近有個小需求是要建立一個簡單的線上影片播放系統，不需要太複雜，只要能播放 FLV 即可。
本文就來為大家介紹一些免費的製作工具，包含轉檔以及播放；不需要有複雜的伺服端環境，也不會有麻煩的設定。
註：如果有線上自動轉檔這方面的需求，建議使用 YouTube API ，或參考 FFmpeg 來架設線上轉檔系統。
軟體下載
我們會用到以下兩個軟體與套件：
- Riva FLV Encoder ： FLV 轉檔轉體。
- Flowplayer ：線上播放影片。
轉檔
其實就是照著介面操作：
在來源檔案的部份，我們可以選擇 FFmpeg 所支援的各種影片類型檔案。
然後轉完檔案後，再把轉好的 flv 檔放在網頁可以存取的地方。
嵌入影片
嵌入影片的方法也很簡單，首先把 Flowplayer 下載回來的 JavaScript 和 Flash 檔案放在適當的地方，然後在 HTML 中載入 JavaScript 即可。
接著利用一個 A 標籤，將連結指向我們的 flv 影片檔；最後再利用 Flowplayer 的指令來載入 Flash 播放器，並將播放位址指向剛剛的連結即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>線上影片播放範例</title> <script type="text/javascript" src="js/flowplayer.js"></script> </head> <body> <a href="video/golfers.flv" style="display:block;width:480px;height:325px;" id="player"></a> <script type="text/javascript"> flowplayer("player", "./swf/flowplayer.swf"); </script> </body> </html>
當然這樣的方案就顯得簡單很多，所以只適合在客戶影片不多，而且較不常更新的專案上使用。不過這個方案還有一個很明顯的缺點，那就是影片是公開的。這時如果需要影片不公開，就需要透過伺服端技術來下載位址做一些特別的處理。
完畢收工，謝謝收看。