在 WordPress.com 嵌入 KickStarter 影片

在 Heresy 剛轉移到 WordPress.com 後沒多久，就有研究過、寫了一篇《在 WordPress 上使用 Flash 物件》，來說明如何透過 gigya 這個特別的語法，來在 WordPress.com 的文章裡面，嵌入任何 Flash 的物件。

在早期，這樣應該算是相當充分了～因為當時大部分的影片，基本上都是以 Flash 撥放器的形式來呈現的。不過現在，由於 HTML5 已經開始慢慢起來了，也有不少網站，開始直接使用 HTML5 Video 作為影片撥放的方式，對這種形式的內容來說，gigya 這個語法，似乎就不能直接套用了…

像是 KickStarter 這個網站就是一個例子。他早期也是使用典型的 Flash Player 的形式來撥放影片，但是現在已經都改用 HTML5 Video 了。

那如果要在 WordPress.com 裡面插入 KickStarter 的影片，該怎麼做呢？其實也很簡單，這邊都用微軟的 IE（Internet Explorer）為例子，來做說明。

首先，如果想透過 [gigya] 的標籤，把影片放到 wordpress.com 的話，基本上，他的標籤語法可以寫得像下面這樣：

[gigya src='http://www.kickstarter.com/swf/kickplayer.swf' 
allowfullscreen='true' allowscriptaccess='always' wmode='opaque' 
flashvars='file=<影片網址>&amp;image=<圖檔網址>' width='640' 
height='480' ] 

其中，紅色的部分，是要去找出來的資料，也就是：

1. 影片檔案的位置
2. 影片封面圖檔的位置（開始撥放影片前顯示的畫面）

而黃色的部分，則是指定撥放器的大小，可以自行根據需要決定。

實際上，這兩者都可以非常簡單取得。以影片封面的網址來說，只要在撥放前，在影片的區域上按右鍵，選「內容」，就可以看到了～它的形式應該會是類似：

https://s3.amazonaws.com/ksr/projects/476061/photo-main.jpg?1370329539

而要取得影片的網址的話，只要先讓影片開始撥放，在 IE 的右鍵選單裡，就會有一個「複製影片 URL」的選項；點選他後，就可以取得影片的網址了！它的形式應該會是類似這樣：

https://d2pq0u4uni88oo.cloudfront.net/projects/476061/video-250488-h264_base.mp4

在取得這兩個網址之後，只要把他們填到上面這段 gigya 語法的紅色部分，就可以了～以這個例子來說，整個完成，就是變成：

[gigya src='http://www.kickstarter.com/swf/kickplayer.swf' 
allowfullscreen='true' allowscriptaccess='always' wmode='opaque' 
flashvars='file=https://d2pq0u4uni88oo.cloudfront.net/projects/476061/video-250488-h264_base.mp4&image=https://s3.amazonaws.com/ksr/projects/476061/photo-main.jpg?1370329539' width='600' 
height='400' ] 

不過要注意的是，這邊是為了顯示的方便而換行的，實際使用時，請不要換行、以避免產生問題。

而實際顯示出來的效果，就會像下面這樣：

這樣基本上，就可以把 KickStarter 的影片、直接放到 WordPress.com 裡了～

不過這邊也要提一下，實際上這邊應該算是省略了不少非必要性的參數，有興趣的話，其實可以自己想辦法家回來的。詳細可以參考《Inserting Kickstarter videos》一文。

廣告