<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="ARTICLE @ XOOPS powered by FeedCreator" -->
<rss version="0.91">
    <channel>
        <title>睡蓮‧池水間 :: 文章</title>
        <description><![CDATA[文章XML]]></description>
        <link>http://waterlily-lsl.com/modules/article/view.article.php/212/c2</link>
        <lastBuildDate>Sat, 11 Feb 2012 00:23:45 +0200</lastBuildDate>
        <generator>ARTICLE @ XOOPS powered by FeedCreator</generator>
        <image>
            <url>http://waterlily-lsl.com/modules/article/images/logo.png</url>
            <title>睡蓮‧池水間 :: 文章</title>
            <link>http://waterlily-lsl.com/modules/article/</link>
            <width>92</width>
            <height>52</height>
            <description>文章XML</description>
        </image>
        <language>zh-TW</language>
        <managingEditor>waterlily at waterlily-lsl dot com</managingEditor>
        <webMaster>waterlily at waterlily-lsl dot com</webMaster>
        <category>文章</category>
        <item>
            <title>於文章中嵌入自訂的FLV/MP4播放器</title>
            <link>http://waterlily-lsl.com/modules/article/view.article.php/212/c2</link>
            <description><![CDATA[類別: 語言集<br />來源: (池水間)　　在網上隨處閒逛，不難見到大多網站尤其是網誌都有在文章內容上插入 YouTube 影片，有些還看到影片原作者利用 YouTube 空間，將自製而成的影片上傳到 YouTube，然後複製代碼，嵌回到自己的網站去。<br /><br />　　 YouTube 的存在，帶擎了 FLV 格式的盛行，而緊隨其後的會是 YouTube 的高畫質 ─── MP 4 格式。<br /> <br />　　現在，要將自製的 FLV 或 MP4 格式影片直接上傳到自己的網站空間上播放，不需要 YouTube，只要有播放器就能輕易實現，還可按個人喜好設定，在不同的文章內容上使用不同的播放器外觀。<br /><br />　　網上提供不少的免費播放器中，被我看上並做了實際測試的有兩個，一是 <a href="http://www.ruochi.com/main/2008/03/19/vcastr-30/" rel="external">Vcastr</a> 的， 另一是 <a href="http://www.mcmediaplayer.com/player/altair/index.html" rel="external">MC Altair</a>，最終應用到池水間上的是後者，而前者因為卡在 IE 的支援問題上，需要留待日後繼續研究如何去解決。<br /><br />　　現在先來介紹一下這個可自訂外觀的 <a href="http://www.mcmediaplayer.com/examples/video/simple.html" rel="external">MC Altair</a>，除了可在<a href="http://www.mcmediaplayer.com/setup/index.html" rel="external">這頁面</a>左邊的 code 頁籤 &gt;&gt; examples 下選擇好範本後按 code &gt;&gt; Export to website 滙出代碼套用外，還可以在 player 頁籤下設定不同的外觀，然後匯出代碼套用之。<br /><br />　　不過無論是使用範本中的 Space、Virgin Galactic、Crystal Ball 還是自訂的，滙出的代碼皆為Javascript，如要用 HTML 嵌入式代碼將影片插入文章中時，可以看看以下本人提供的做法。<br /><br />　　先來看一個 <a href="http://waterlily-lsl.com/modules/wordpress/132" rel="external">FLV</a> 和 <a href="http://waterlily-lsl.com/modules/article/view.article.php/220" rel="external">MP4</a> 格式的示例，前者是用了 Crystal Ball 範本，後者則為自訂，皆沒有套用匯出的 Javascript 碼，只參看了裡面的變數後，用另一種方式，在嵌入代碼上加入了相關設定。<br /><br />　　使用嵌入式代碼時，只需有兩個檔案── swf 和 flv(或mp4) 便可以播放，連 js 檔也不用。swf 本身是一個播放器，可在 Files 頁籤 &gt;&gt; Player Files 下載名為 mcmp.swf 檔案，或用該站提供的mcmp.swf 網址作連結也可。<br /><br />現在來看看下面的嵌入碼<br /><div class="xoopsCode"><p class="cTitle"><img class="icon-l" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon1.gif" alt=""/><img class="icon-r" src="http://waterlily-lsl.com/themes/waterlilyLSL-GW/img/code-icon2.gif" alt=""/></p><pre>
&lt;object type=&quot;application/x-shockwave-flash&quot; data=&quot;<span style="color: #ffff66;">*****</span>&quot; width=&quot;<span style="color: #33ff00;">寬度</span>&quot; height=&quot;<span style="color: #33ff00;">高度</span>&quot;&gt;
&lt;param name=&quot;movie&quot; value=&quot;<span style="color: #ff3300;">*****</span>&quot; /&gt;
<span style="color: #00ccff;">&lt;param name=&quot;wmode&quot; value=&quot;opaque&quot; /&gt;</span> 
<span style="color: #aaaaaa;">&lt;param name=&quot;allowFullScreen&quot; value=&quot;true&quot; /&gt;</span>
&lt;param name=&quot;FlashVars&quot; value=&quot;fpFileURL=<span style="color: #ffac00;">*****.flv</span>&amp;<span style="color: #9F8EFF;">colorScheme=000000</span>&amp;<span style="color: #9F8EFF;">playerBackgroundColor=000000</span>&quot; /&gt;&lt;/object&gt;
</pre></div><br /><span style="color: #ffff66;">● </span>黃色星號是輸入 swf 網址的地方，非 IE 瀏覽器用之。<br /><span style="color: #33ff00;">● </span>綠色的是加入數值，可自訂寬和高。亦可以參看 player 頁籤下的 player size。<br /><span style="color: #ff3300;">● </span>紅色的就與黃色一樣，用同一個 swf 網址，是給 IE 瀏覽器用。<br /><span style="color: #00ccff;">● </span>藍色則是當播放器所在頁面上有另一個顯示層被這播放器所蓋著時，加入此句就能解決問題，沒有被蓋的問題者可省略此句。<br /><span style="color: #aaaaaa;">● </span>灰色則設定是否允許全螢幕播放。<br /><span style="color: #ffac00;">● </span>橘字則是播放器的靈魂 ── 您的 FLV 或 MP4 網址。<br /><span style="color: #9F8EFF;">● </span>紫色是自訂播放器外觀，可視乎需要加入更多不同變數，每個變數前面要加上<strong class="A_strong">&amp;amp;</strong>號。可用的變數請參看這裡的<a href="http://www.mcmediaplayer.com/setup/variables/index.html" rel="external">變數列表</a>，或從匯出的 Javascript 中將變數加到 HTML 嵌入碼中，加入時請將變數後面的<strong class="A_strong">"" </strong>號去除。亦可以不加入任何變數，播放器會使用預設的外觀。<br /><br /><p style="text-align:center;color:#ffcfff;font-size:13px">自訂外觀範例演示之簡約版</p><div style="float:left;margin:0 30px;width:322px;height:182px;position:relative;border:2px dotted #714b6e"><object type="application/x-shockwave-flash" data="/themes/waterlilyLSL-GW/flv/wlflvplayerA.swf" width="322" height="182" class="wlflv"><param name="movie" value="/themes/waterlilyLSL-GW/flv/wlflvplayerA.swf" /><param name="wmode" value="opaque" /><param name="allowFullScreen" value="true" /><param name="FlashVars" value="fpFileURL=/themes/waterlilyLSL-GW/flv/wl091109.flv&amp;fpPreviewImageURL=http://img.photobucket.com/albums/v428/0927/preimg.jpg&amp;defaultEndAction=pauseAtEnd&amp;playerSize=322x182&amp;playerBackgroundColor=000000&amp;fpButtonOpacity=0&amp;cpPlayBtnColor=000000&amp;cpPlayBtnPosition=302x10&amp;cpStopBtnPosition=342x35&amp;cpVolumeBtnPosition=-30x20&amp;cpScrubberPosition=-30x-20&amp;cpCounterPosition=300x10&amp;cpRepeatBtnPosition=-30x20&amp;cpFullscreenBtnPosition=-20x20&amp;cpInfoBtnPosition=-10x20&amp;cpHidePanel=never&amp;videoScreenSize=320x180&amp;videoScreenPosition=1x1&amp;cpSize=26x182&amp;cpBackgroundOpacity=60&amp;cpPosition=296x0&amp;cpBackgroundColor=714b6e" /></object><small style="width:20px;height:66px;position:absolute;z-index:5;top:112px;right:0px;line-height:16px;color:#ffbfff;text-shadow:2px 1px 0 #000">池水間</small></div><div style="margin:0 30px;width:320px;height:180px;position:relative;border:1px solid #714b6e;float:right"><object type="application/x-shockwave-flash" data="/themes/waterlilyLSL-GW/flv/wlflvplayerA.swf" width="320" height="180" class="wlflv"><param name="movie" value="/themes/waterlilyLSL-GW/flv/wlflvplayerA.swf" /><param name="wmode" value="opaque" /><param name="FlashVars" value="fpFileURL=/themes/waterlilyLSL-GW/flv/wl091111.flv&amp;fpPreviewImageURL=http://img.photobucket.com/albums/v428/0927/preimg.jpg&amp;defaultEndAction=pauseAtStart&amp;fpButtonColor=714b6e&amp;playerSize=320x180&amp;playerBackgroundColor=000000&amp;fpButtonSize=72x72&amp;fpButtonPosition=124x54&amp;fpButtonOpacity=80&amp;cpPlayBtnPosition=332x10&amp;cpStopBtnPosition=342x35&amp;cpVolumeBtnPosition=-30x20&amp;cpScrubberPosition=-30x-20&amp;cpCounterPosition=330x10&amp;cpRepeatBtnPosition=-30x20&amp;cpFullscreenBtnPosition=-20x20&amp;cpInfoBtnPosition=-10x20&amp;videoScreenSize=320x180&amp;cpSize=0x0" /></object></div><br style="clear:both" /><br />]]></description>
            <author>睡蓮</author>
            <pubDate>Wed, 11 Nov 2009 00:40:00 +0200</pubDate>
        </item>
    </channel>
</rss>

