space 嵌入音樂教學(二)

11月3日

二. 在 Windows Media Player 模塊內播放 YouTube、I’m Vlog、Google Video 等網上影片

現今的網上世界, 有不少像 YouTubeI’m VlogGoogle Video 等的網上影片分享網站, 內裡也有不少有趣的影片, 如果想將這些影片放入自已的 Live Spaces, 再和朋友們分享, 豈不是更有趣?

但問題來了, 到底要怎樣做才可以將這些影片放在 Live Spaces 內?

不用怕~ 我們還有 Windows Media Player 這模塊, 它不是支持 .swf 格式檔案播放嗎?

對! Windows Media Player 這模塊確是一個好工具。

但新的問題來了, 在以上的網上影片分享網站, 所公開的影片路徑, 都不是以 .swf 格式作為給尾, 所以即使將整個路徑 Copy 到 Windows Media Player 的 URL 上, 也無法成功播放。
 

 

分析路徑

其實, 只要將這些網上影片分享網站所提供的影片路徑加以分析, 即可將影片的路徑轉為 Windows Media Player 這模塊所能支援的格式, 現在就讓夜衫衫遂一慢慢說明吧~

首先, 各位的 Spaces 內, 必須先新增 Windows Media Player 模塊, 如果各位不清楚如何新增這模塊, 請參考<六. Windows Meida Player PowerToy 教學>。

 

YouTube 影片路徑分析

YouTubehttp://www.youtube.com/

1. 大家到 YouTube 瀏覽影片時, 有沒有發現在右邊有一個名為 Embed 的欄位 (圖1)? 這就是該影片的嵌入式路徑了, 甚麼是嵌入式路徑? 這是提供給用戶在製作網頁時, 可以在網頁上做出一個播放器, 並直接支援播放該影片。

好了, 既然有了這影片的嵌入式路徑, 那我們就可以好好利用一下, 請先將整段嵌入式路徑, 複製出來。

(圖1)

2. 複製出來後, 得出的嵌入式路徑為以下:

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlNigtJQW0E"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NlNigtJQW0E&quot; type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

3. 夜衫衫在上述已提過, 嵌入式路徑是提供給用戶在製作網頁時, 可以在網頁上做出一個播放器, 並直接支援播放該影片; 那麼, 在這個嵌入式路徑內, 必定隱藏著該影片的路徑, 就以上面的代碼為例, 其實影片的路徑已經出現了兩次了, 大家如果看不清楚的話, 夜衫衫就將這段影片的路徑以不同顏色顯示出來吧。

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NlNigtJQW0E"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NlNigtJQW0E" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

4. 現在清楚地看到吧? http://www.youtube.com/v/NlNigtJQW0E 就是影片的路徑了。其實所有影片的路徑是「有跡可尋」的。首先, 凡是影片的路徑, 多數是以 http://mms:// 為開端的 (其實還有其他種類的開端, 不過 Windows Media Player 這模塊只支持這兩種開端的音樂或影片的路徑而已); 另一方面, 影片的路徑多以被兩個引號「""」包裹著的, 所以, 從以上的嵌入式路徑, 就可以找到我們的目的 – 影片的路徑。

5. 現在既然知道了影片的路徑, 但仍不可直接使用, 原因是 Windows Media Player 這模塊只支持以 .mp3 /.wma /.wmv /.wav /.midi /.mpg /.mpeg /.avi 等副檔名作為結尾的路徑, 才算有效, 那麼, 唯有修改一下這影片的路徑, 令它變成「有效」了。

6. 要修改影片的路徑, 令它變成「有效」, 方法非常簡單, 就是在整段路徑的最後面, 加上 #.wmv, 修改後, Windows Media Player 這模塊就能支持這影片的路徑了。

原來的路徑 – http://www.youtube.com/v/NlNigtJQW0E

修改後的路徑 – http://www.youtube.com/v/NlNigtJQW0E#.wmv

7. 就是這樣, 趕快試試看吧~ 將修改後的路徑, 直接填到 Spaces 內 Windows Media Player URL 欄位上 (圖2), 不過各位要留意一點, Display Mode 最好選擇 "Mini" "Full", 而且盡可能將 Auto Start 的選項打勾 (下面再解釋), 最後填上後可別忘記按「Save」啊~ 然後就可以預覽, 看看成果~

(圖2)

8. 成功了~! 不過各位必須留意, 即使將 Auto Start 的選項打勾, 影片還是不會自動播放的, 原因是這影片已被嵌入到 YouTube 的播放器內, 要播放這影片時, 你的瀏覽者還是須要手動按一下 YouTube 播放器內的 「Play」(圖3)。這樣, 為甚麼還要將 Auto Start 的選項打勾? 原因是, 如果沒有打勾, 會變成即使瀏覽者手動按一下YouTube 播放器內的 「Play」, 但影片還是不會播放! 所以為了方便你親愛的瀏覽者, 還是記得將 Auto Start 的選項打勾; 另一方面, 如果 Display Mode 設定為 "Invisible" "None" 的話, Windows Media Player 「Play」按扭是不會顯示出來的, 這樣你的瀏覽者就無法使用, 所以最好還是選擇 "Mini" "Full", 避免自已一時大意, 忘記將 Auto Start 的選項打勾。

(圖3)

現在, 各位已明白如何將 YouTube 的影片加入自已 Live Spaces 內了, 接下來, 就看看 I’m Vlog 的影片又應該如何慮理。
 

I’m Vlog 影片路徑分析

I’m Vlog 2.0Betahttp://www.im.tv/vlog/

其實, 將 YouTube 的影片加入自已 Live Spaces 內, 和要將的 I’m Vlog 的影片加入自已 Live Spaces 內, 其中道理是完全一樣的, 只有少許不一樣的處理方法, 所以, 夜衫衫就不再將每一個細節也逐一說明, 改以重點形式講解, 希望各位也能明白。

1. 先到 I’m Vlog 選擇心宜的影片, 然後在左邊找到了這影片的嵌入式路徑, 按下「複製連結」按扭即可複製出來 (圖4)

(圖4)

2. 複製出來的嵌入式路徑為以下:

<object width=’450′ height=’338′ classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′><param value=’always’ name=’allowScriptAccess’></param><param name=’movie’ value=’http://myvlog.im.tv/?id=795814&mid=387788&album=0′></param><param value=’high’ name=’quality’></param><embed src=’http://myvlog.im.tv/?id=795814&mid=387788&album=0&#8242; type=’application/x-shockwave-flash’ width=’450′ height=’338′></embed></object>

3. 利用上述的講解, 找出影片的路徑。

<object width=’450′ height=’338′ classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′><param value=’always’ name=’allowScriptAccess’></param><param name=’movie’ value=’http://myvlog.im.tv/?id=795814&mid=387788&album=0‘></param><param value=’high’ name=’quality’></param><embed src=’http://myvlog.im.tv/?id=795814&mid=387788&album=0‘ type=’application/x-shockwave-flash’ width=’450′ height=’338′></embed></object>

4. http://myvlog.im.tv/?id=795814&mid=387788&album=0 就是影片的路徑了。在這裡, 如果大家按照上述的方法, 即在整段路徑的最後面, 加上 #.wmv, 變成 http://myvlog.im.tv/?id=795814&mid=387788&album=0#.wmv, 是不行的~! 為甚麼? 因為的 I’m Vlog 的嵌入式路徑, 在格式上和 YouTube 的完全不同, 因為 I’m Vlog 的嵌入式路徑包含著不少有關該影片存放到伺服器的參數, 所以, 我們的處理方法會有少許不同, 夜衫衫今次就先將正確能被 Windows Media Player 支持的路徑顯示出來, 再慢慢說明吧。

原來的路徑 – http://myvlog.im.tv/?id=795814&mid=387788&album=0

修改後的路徑 – http://myvlog.im.tv/#.wmv?id=795814&mid=387788&album=0

5. 看到了吧? 雖然處理方法都是在原來的路徑再加上 #.wmv, 但這次卻不是加在最後, 而是加在原來的路徑中的問號「?」前面。為甚麼? 就是因為 http://myvlog.im.tv/ 才是真正影片的路徑了。

「夜衫衫~ 不會吧? 明顯地 http://myvlog.im.tv/ 只是個普通的網站地址, 再怎麼看也不可能會是影片的路徑啊!」

對, 這個網站地址, 正常來說不可能會是影片的路徑, 不過大家可別忘記後面的參數, 即是:

「?id=795814&mid=387788&album=0」

當然, 夜衫衫不會叫各位去解讀這些參數背後的含意是甚麼, 不過, 大家可以想像為,  http://myvlog.im.tv/ 是影片的路徑, 但其實內裡包含了很多不同的影片, 而 ?id=795814&mid=387788&album=0 則是尋找該影片的方法, 甚至可以說是該影片的唯一名稱。而另一方面,  Windows Media Player 在播放影片時, 它會先看該影片的路徑是否有效, 再來才會處理有關的參數, 所以, 為了令 Windows Media Player 能夠播放這影片, 唯一的方法就是先告訴它這影片的路徑, 再在後面加上參數。

就是這樣, 修改後的路徑為 – http://myvlog.im.tv/#.wmv?id=795814&mid=387788&album=0

那麼, 各位可能會問, 在一個嵌入式路徑中, 怎樣才能區分那些是參數?

其實有一個頗為簡單的方法, 就是看看問號「?」在那裡, 大家可以想像為, 各參數的開端就是問號「?」了。

這樣, 在一個嵌入式路徑中, 要找出影片的路徑時, 就出現了以下三種規則:

a, 凡是影片的路徑, 多數是以 http://mms:// 為開端的。

b, 影片的路徑多以兩個引號「""」包裹著的。

c, 各參數大多數是以問號「?」為開端的。

當然, 夜衫衫以上的解釋不算是完全正確, 不過最重要的, 就是大家知道已後如何在一個嵌入式路徑中, 找出影片的路徑。

好了, 說了麽麼多, 我們原來的目的還記得嗎? 既然現在知道了如何從 I’m Vlog 的嵌入式路徑中, 找出可以令 Windows Media Player 能夠播放影片的路徑, 就趕快試試看吧~ 將修改後的路徑, 直接填到 Spaces 內 Windows Media Player URL 欄位上 (圖5), 然後看看成果~

(圖5)

6. 結果, 當然是影片能夠成功播放 (圖6) ~ ^^

(圖6)

既然現在 YouTubeI’m Vlog 的影片也可以加入到自已 Live Spaces 內, 相信其他的網上影片分享網站, 應該也能利用相同的道理, 那麽就以 Google Video 來試試看好了~

 

Google Video 影片路徑分析

Google Video Betahttp://video.google.com/

1. 和上面一樣, 請先到 Google Video 選擇心宜的影片, 然後在右邊, 請按下「電子郵件 – blog – 張貼到 MySpace」按扭 (圖7)

(圖7)

2. 按下後, 請再按一下 內嵌 HTML 連結 (圖8)

(圖8)

3. 就是這樣, 這影片的嵌入式路徑就會顯示出來 (圖9), 先複制出來吧~

(圖9)

4. 複製出來的嵌入式路徑為以下:

<embed style="width:400px; height:326px;"
id="VideoPlayback" type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=-
6176702600168718216&hl=zh-TW" flashvars=""> </embed>

5. 利用上述的講解, 找出影片的路徑。

<embed style="width:400px; height:326px;"
id="VideoPlayback" type="application/x-shockwave-flash"
src="http://video.google.com/googleplayer.swf?docId=-
6176702600168718216&hl=zh-TW" flashvars=""> </embed>

6. 好了, 又時候修改影片的路徑了, 不過這一次不知道各位又知不知道修改後的路徑是甚麼?

如果按照上面的理論, 修改後的路徑應該是:

http://video.google.com/googleplayer.swf#.wmv?docId=-6176702600168718216&hl=zh-TW

這次沒有錯吧?

……對不起, 錯! 正確的答案是:

http://video.google.com/googleplayer.swf?docId=-6176702600168718216&hl=zh-TW#.wmv

「甚麽!?!? 夜衫衫! 你不是在騙人嗎!? 又說在問號「?」前的是影片路徑; 後面的是參數, 怎麼這次又不對了!?」

唉……這一次, 夜衫衫也有口難言了, 原因是 Google Video 所提供的嵌入式路徑, 在性資和結構上, 和 I’m Vlog 的又有些不同, 不能相提並論……

「夜衫衫! 我好不容易才記著了你上面所說的甚麼 a, b , c 規則, 現在你又說甚麼性資結構不同, 那先前所說的不就是廢話嗎!?」

規則 a, 凡是影片的路徑, 多數是以 http://mms:// 為開端的。

規則 b, 影片的路徑多以兩個引號「""」包裹著的。

規則 c, 各參數大多數是以問號「?」為開端的。

唉……夜衫衫也猜到各位心中會這樣想, 但我也沒辨法,  Google Video 這種嵌入式路徑, 的確不能完全應用上述所提及過的 a, b , c 規則, 只可用規則 a 及規則 b, 至於規則 c, 是不能應用到 Google Video 這種嵌入式路徑的, 而且…..

「還有!? 而且甚麽? 快說!!」

就是並非所有從 Google Video 所得到的嵌入式路徑, 只用上規則 a 及規則 b, 也有機會無法在 Windows Media Player 播放……

「夜衫衫! 你~~!!!」

各位就別再生氣啊~ 坦白說, 如果 Google Video 是這麽容易, 只靠規則 a 及規則 b 來處理就能成功的話, 夜衫衫也不須在這裡故意提出來說明啦~

夜衫衫就以上述的例子來說明好了, http://video.google.com/googleplayer.swf?docId=-6176702600168718216&hl=zh-TW#.wmv 這路徑是 100% 可以被 Windows Media Player 所支持, 不過, 並非所有從 Google Video 所得到的路徑, 是這麼「短」的, 這就是原因了。

甚麼是路徑「短」?

就是路徑的字數了, 曾經, 夜衫衫就試過從 Google Video 內的影片中, 得到類似以下的路徑:

http://video.google.com/googleplayer.swf?docId=-400122564567824564524542747425723456456864531234567768718216&hl=en-GB

註: 夜衫衫已忘記了那次所得到的路徑, 上面的路徑只是例子而已。

以上的路徑, 在最後加上 #.wmv 的話, 就是:

http://video.google.com/googleplayer.swf?docId=-400122564567824564524542747425723456456864531234567768718216&hl=en-GB#.wmv

結果不論試多少次, 也不能成功在 Live Spaces 內, 以 Windows Media Player 來播放這影片, 不過, 其他 Google Video 內的影片, 卻可成功播放, 這件事令夜衫衫百思不得其解。

最後, 聽到國外一位朋友所說, 這可能是因為這個路徑太長, 請利用 TinyURL.com 的服務來縮短這路徑, 結果, 一試之下就成功了。

所以, 夜衫衫也不得不承認,  Windows Media Player 這模塊所支持的 URL 長度, 應該是有限制的, 至於是多少, 夜衫衫也不得而知。

夜衫衫也只知道, 如果當你嘗試利用 Live Spaces 內 Windows Media Player 這模塊來播放這影片時, 無法成功播放, 不妨利用類似 TinyURL.com 所提供的服務來縮短該影片路徑再試試看, 也許就能成功了。

甚麼? 大家不知道 TinyURL.com 所提供的服務是甚麼? 這個麻…沒辦法了, 夜衫衫唯有再說明一下吧……

7. 簡單來說,  TinyURL.com 所提供的服務就是縮短網址, 如果還不清楚, 請先來來看看 (圖10)。用瀏覽器登入 www.tinyurl.com, 就會看到在該網站的中間位置, 有一個欄位, 現在夜衫衫就以上述的路徑為例, 將路徑填在這欄位上, 再按一下旁邊的「Make TinyURL !」按扭。

(圖10)

8. 然後, 瀏覽器就會跳到另一畫面, 並顯示「TinyURL was created!」(圖11), 而在下面, 則會出現兩個 URL, 一個是剛才所填上的路徑; 而較下面的那一個就是 TinyURL.com 所轉換出來的新路徑, 以上兩個路徑其實是相同的, 分別只是一個較長, 另一個較短, 這就是 TinyURL.com 所提供的服務了。現在, 就可以試試利用 TinyURL.com 所提供的新 URL, 看看能否成功在 Live Spaces 內被 Windows Media Player 這模塊所支持, 但謹記, 利用這個新 URL 前, 還是要加上 #.wmv 在最後, 即是 http://tinyurl.com/y95hmq#.wmv

(圖11)

9. 在 Windows Media Player 模塊內, 填上新的 URL, 即是 http://tinyurl.com/y95hmq#.wmv (圖12)

(圖12)

10. 可以成功播放了~

(圖13)

想不到, 會花了這麼長的時間來寫這遍教學, 不過如果大家真的能明白以上所說, 夜衫衫認為, 即使出現更多的網上影片分享網站, 各位已能完全掌握技巧, 知道怎樣將這些影片放入自已的 Live Spaces 內, 這不是比只靠死背方法更有趣嗎? 如果大家有任何有關的疑問, 歡迎留言吧~ ^^

最後大家要記得一點, 就是暫時不是所有的瀏覽器, 也可支持在 Spaces 內顯示 Windows Media Player 模塊的, 所以如果當你發現看不到影片時, 請先以 I.E 來試清楚, 再慢慢檢查以上每一步的工作。

2007 年 1 月 27 日更新:

Windows Live Spaces 系統更新後, 新增一個特別功能 – 內嵌視訊。利用內嵌視訊, 用戶可以在部落格上直接加入各網上影片分享網站的視訊, 各位只要直接複製由各網上影片分享網站提供的嵌入式路徑, 在完全不用修改代碼的情況下, 也可以在部落格上直接加入視訊影片。有關這次系統更新的詳情, 各位可以參考這裡

2007 年 7 月 19 日更新:

自從 2007 年 7 月 19 日起, Windows Live Spaces 的系統更新後已加入新的「影片」模塊, 該模塊支持直接貼上各影片的嵌入式路徑, 各位只要直接複製由各網上影片分享網站提供的嵌入式路徑, 在完全不用修改代碼的情況下, 也可以在部落格上直接加入視訊影片。有關這次系統更新的詳情, 各位可以參考這裡

 

本教學最後更新日期: 2007 年 7 月 19 日

本節教學完畢

如果要轉載這篇文章, 請使用「引用通告」功能, 或指明出處, 感謝。
不清楚如何使用「引用通告」功能, 可參考這裡

引用自 http://camuschu.spaces.live.com/blog/cns!85BD955C085738A8!1139.entry

廣告
本篇發表於 電腦和網際網路。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s