睡蓮‧池水間

Guest
2010-Mar-11  
0 位會員和 9 位訪客在線上

文章 :: 語言集

於文章中嵌入自訂的FLV/MP4播放器

睡蓮
 
池水間 
  在網上隨處閒逛,不難見到大多網站尤其是網誌都有在文章內容上插入 YouTube 影片,有些還看到影片原作者利用 YouTube 空間,將自製而成的影片上傳到 YouTube,然後複製代碼,嵌回到自己的網站去。

   YouTube 的存在,帶擎了 FLV 格式的盛行,而緊隨其後的會是 YouTube 的高畫質 ─── MP 4 格式。

  現在,要將自製的 FLV 或 MP4 格式影片直接上傳到自己的網站空間上播放,不需要 YouTube,只要有播放器就能輕易實現,還可按個人喜好設定,在不同的文章內容上使用不同的播放器外觀。

  網上提供不少的免費播放器中,被我看上並做了實際測試的有兩個,一是 Vcastr 的, 另一是 MC Altair,最終應用到池水間上的是後者,而前者因為卡在 IE 的支援問題上,需要留待日後繼續研究如何去解決。

  現在先來介紹一下這個可自訂外觀的 MC Altair,除了可在這頁面左邊的 code 頁籤 >> examples 下選擇好範本後按 code >> Export to website 滙出代碼套用外,還可以在 player 頁籤下設定不同的外觀,然後匯出代碼套用之。

  不過無論是使用範本中的 Space、Virgin Galactic、Crystal Ball 還是自訂的,滙出的代碼皆為Javascript,如要用 HTML 嵌入式代碼將影片插入文章中時,可以看看以下本人提供的做法。

  先來看一個 FLVMP4 格式的示例,前者是用了 Crystal Ball 範本,後者則為自訂,皆沒有套用匯出的 Javascript 碼,只參看了裡面的變數後,用另一種方式,在嵌入代碼上加入了相關設定。

  使用嵌入式代碼時,只需有兩個檔案── swf 和 flv(或mp4) 便可以播放,連 js 檔也不用。swf 本身是一個播放器,可在 Files 頁籤 >> Player Files 下載名為 mcmp.swf 檔案,或用該站提供的mcmp.swf 網址作連結也可。

現在來看看下面的嵌入碼

<object type="application/x-shockwave-flash" data="*****" width="寬度" height="高度">
<param name="movie" value="*****" />
<param name="wmode" value="opaque" /> 
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="fpFileURL=*****.flv&colorScheme=000000&playerBackgroundColor=000000" /></object>

黃色星號是輸入 swf 網址的地方,非 IE 瀏覽器用之。
綠色的是加入數值,可自訂寬和高。亦可以參看 player 頁籤下的 player size。
紅色的就與黃色一樣,用同一個 swf 網址,是給 IE 瀏覽器用。
藍色則是當播放器所在頁面上有另一個顯示層被這播放器所蓋著時,加入此句就能解決問題,沒有被蓋的問題者可省略此句。
灰色則設定是否允許全螢幕播放。
橘字則是播放器的靈魂 ── 您的 FLV 或 MP4 網址。
紫色是自訂播放器外觀,可視乎需要加入更多不同變數,每個變數前面要加上&amp;號。可用的變數請參看這裡的變數列表,或從匯出的 Javascript 中將變數加到 HTML 嵌入碼中,加入時請將變數後面的"" 號去除。亦可以不加入任何變數,播放器會使用預設的外觀。

自訂外觀範例演示之簡約版

池水間


    «« 用 CSS 3 將你的設計帶入下個高度 使用 CSS3 創建動畫效果 »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c2/212
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/212

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

文章分類

最新留言

留言日期:2010-Mar-10 16:31pm
留言編號:47
留言者: kely
網主回覆:
現有留言數: 43

前往萍踪留影

造訪統計

今天:105
昨天:266
本週:1102
本月:2551
總計:144344
平均:246

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
登 入