跳到主要內容

Flash載入youtube影片

大家好,我是奶綠茶
想在自已的網站裡載入youtube的影片
這樣就可以吃他們的頻寬,那該如何製作呢
當然有好心人事包裝好類別檔了呀
http://code.google.com/p/youtubechromelesswrapper-as3/downloads/list
透過該作者包裝的類別,就可以載入youtube的影片
優點就是播放界面可以自已設計,
缺點當然就是播放介面的功能要自已寫。
PS:影片上會有youtube的logo。

另一位作者寫的類別
http://www.abdulqabiz.com/blog/archives/2007/04/02/constructing-youtube-flv-url-on-client-side-without-any-server-side-script/
優:會把整個youtube的播放介面整個載入進來
缺:播放介面就是用預設

補:現在Youtube的Player, 已經支援 AS3 版本了,所以上方那幾個網址都可以不用看
官方有提供AS3的API, 只要載入即可, 不過因為回傳的都是Object, 寫code沒有提示
所以我把類別再包裝一次,方便使用:
線上Demo:按我
使用方法如下:
import milkmidi.events.StreamEvent;
import milkmidi.events.VideoStateEvent; 
import milkmidi.media.YoutubeLoader;
//先建立一個 YoutubeLoader 實體
var p:YoutubeLoader = new YoutubeLoader(true); //參數一:是否自動播放。
p.addEventListener(YoutubeLoader.READY, handleYoutubeReady);//當YoutubePlayer準備好時
p.addEventListener(YoutubeLoader.ERROR , function (e:Event):void {
trace(e);
});
p.addEventListener(VideoStateEvent.STATE_CHANGE , _AntYoutubeLoaderStateChangeHandler);
p.addEventListener(StreamEvent.FILE_LOAD_PROGRESS , _progressHandler);//檔案載入時
p.addEventListener(StreamEvent.STREAM_PROGRESS , _streamProgressHandler);//影片播放時
addChild(p);//加到場景上

然後載入影片的時機點,一定要等到READY事件後能才加。
function handleYoutubeReady(e:Event):void {   
 // 填入 Youtebe 影片路徑, 要注意喔,這裡的路徑要轉換一下
 // Youtue影片網址長成這樣:http://www.youtube.com/watch?v=siQgD9qOhRs
 // 而 Flash 要用的路徑長成這樣:http://www.youtube.com/v/siQgD9qOhRs
 // 看到差別了吧, 一個是watch?v= , 一個是 /v/
 p.loadVideoByUrl("http://www.youtube.com/v/siQgD9qOhRs"); 
 //影片大小
 p.setSize(400, 300);
} 
祝大家使用愉快
SourceCode Download

留言

Black寫道…
綠奶大師!~
我有個問題想問你....
怎麼在FLASH裡面設定
按一個按鈕要連結"同一個視窗"?
不是用IF框架那種喔!~
?????
milkmidi寫道…
什麼是連結同一個視窗
Winster表示…
Hi , Milkmidi以下這些我找過的連結youtube網頁似乎都失效:
(1)Abdul Qabiz’s Blog:
http://www.abdulqabiz.com/blog/archives/2007/04/02/constructing-youtube-flv-url-on-client-side-without-any-server-side-script/
(3)youtubeflashplayer.com:
http://www.youtubeflashplayer.com/index.php
(4)ToobPlayer :
http://emehmedovic.com/xmca/toobplayer/#/glossy_skin/
(5)邦邦的部落格 :
http://blog.ben.idv.tw/2007/12/flash-youtube-part-2.html
(6)Pogopixels - Web:
http://pogopixels.com/blog/getting-the-url-of-a-youtube-flv-file-in-flash/

經不斷搜查, youtube 似乎於2008十月改版一次,2009年初改版一次,而您提供的 youtube Wrapper class 在其index.html demo 網頁上做連結是可行的.
想請教 :
1. YouTube Wrapper class 可以讓我在player上執行而不使用web 嗎 ?
2. ToobPlayer這個套件有更新的版本嗎? 還是我要怎麼修改code才能連呢 ?
3.還有什麼方式我可以成功連結youtube呢?(only using flash player, no web)

感恩
Winster_Lin
chazen1126@gmail.com
ChiouChu寫道…
最近也遇到youtube的問題
get_video.php這支要傳給他的t用網路上搜尋到的方法
t都會得到undefined
我也在想是不是改版前後有不同呼叫方式
因為在youtube的原始碼上把t找到,代入get_video.php的參數也還是不能顯示

ToobPlayer的其中gray_skin這支,目前把改版後的影片ID丟進去會正常
http://emehmedovic.com/xmca/toobplayer/#/gray_skin/

後來找到google上有
http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html
用他的方法可以成功載入youtube,在flash裡面也可以切換
只是本機測試destroy()會造成當機,也會有Security Sandbox Violation的警告
放到網路目前都正常,可以切換(但播放器還是預設的)
但也還是不確定在本機出現的問題能不能解決
Winster表示…
Hi , chiou
請問 , 我到toutube API Reference:
http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html#Loading
下載他的Loading the SWF
, 為什麼不能發布阿, 一發布swf 就說
建立flash 影片檔時發生錯誤, 目的資料夾不存在, 請重新設定發布設定
奇怪, 我去看他的script 並沒有什麼folder path 阿 ?
ChiouChu寫道…
hi,Winster
他的發佈設定裡面有設他原本的路徑
在檔案\發佈設定\格式
"使用預設名稱"或改成你要發布的名稱
Winster表示…
Hi , ChiouThank you !我能夠發佈了.

有一些問題想請教你:
(1)我執行發怖的swf它叫我輸入除錯程式或應用程式主機位址,此時我並不知道這是什麼,便隨意輸入一組IP然後就Crash了.?請問這是要我輸入什麼呢?
(2)請問youtube提供的這個範例是run for broeser or flash player(stand alone) ?
(3)ToobPlayer的其中gray_skin這支我載入一個 youtube-address like :
http://www.youtube.com/watch?v=PIWX6Xm7XD8
依然不能播放, 是需要把所有參數一起丟進去嗎? 還是我方式錯誤呢 ?
謝啦, 一次問這麼多問題,不好意思,剛學,會的不多,問題很多!~
Winster
chazen1126@gmail.com
milkmidi寫道…
ToobPlayer目前好像沒有更新,
3.還有什麼方式我可以成功連結youtube呢?(only using flash player, no web)
這個就不可能
要連線youtube影片, 就一定要使用到web呀, 除非你把他的影片載回到本機使用就可以
Winster表示…
Hi , Milkmidi
恩 , 雖然網路上也有寫下一些use flash player stand alone 的方式偷偷連結youtube的FLV media server, 但由於youtube一直不斷在改版, 目前找到的程式碼都不能用,現在只能希望
(1)ToobPlayer改版
(2)youtube提供的api 可行,但如上我所描述,還不太知道怎麼用,還有一些問題.
(3)有未發現的網站已經釋出方法了.
ㄛ彌陀佛.
Winster
B.R.
Winster表示…
Hi
謝謝大家幫忙

我再繼續找相關資料

Winster
Winster表示…
Hi All

I found out a web site they clared using as3 to receive youtube as2 API and do have successfully connection.

This web site for your reference :

http://www.perkstoveland.com/archives/40

Winster
B.R.
milkmidi寫道…
謝謝提供,這就來研究一下
Winster表示…
Hi all

想在這邊請教一下, 我下載了youtube API for flash as2 的範例, 已經可以從code 裡面修改video ID 做不同影片的連結了,此時我想設定立刻播放影片function時,寫了下面的 code(using youtube api):

ytplayer.playVideo();

為什麼開啟swf時仍不會直接播放呢?

有勞有興趣的朋友幫忙釋惑一下

Winster

B.R.
ChiouChu寫道…
hi,Winster

如果是直接在load完以後設定立刻播放影片function
好像會太快,原因我也不是很確定
因為如果在onLoadProgress裡面,判斷bytesLoaded == bytesTotal之後再呼叫
好像還是太快,但如果過個1秒呼叫他就可以,感覺上是偏方^^"
但我想跟他會傳回一些錯誤訊息後才算load到有關

var IntervalID:Number;
var ytPlayerLoaderListener:Object = new Object();
ytPlayerLoaderListener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {
if(bytesLoaded == bytesTotal){
IntervalID = setInterval(onStartMovie, 1000);
}
}
function onStartMovie(){
ytplayer.playVideo();
clearInterval(IntervalID);
}

另外,前面你提到
(3)ToobPlayer的其中gray_skin這支我載入一個 youtube-address like :
http://www.youtube.com/watch?v=PIWX6Xm7XD8
我看這個連結丟到gray_skin的那個可以耶?
網址跟影片的ID(PIWX6Xm7XD8)都可以
會不會你多key到一個空白?

感謝你上面提供的網址!
Winster表示…
Hi , Chiou

1_

謝謝你那段auto play 的 code , 對我有幫助到,感恩了.

2_

ToobPlayer的gray_skin我重新try 還是不行, 是不是這東西是run 在server side呢(need Apache or IIS)?


Winster

B.R.
LUCAS HUANG寫道…
奶綠老師您好

上面那一套可以用 我弄出來了
我發現它超方便的 比本來自己做在主機的flv還少code

http://imwaterman.com.tw/

不過 因為我影片是子swf 所以後來發現
他Event.REMOVED_FROM_STAGE 還是有些問題 clear沒辦法正確執行 變成只能用pause來做 但是 看起來是沒差 至少之前音樂停不下來的窘境不會出現了

然後我覺得第二套好像不能用 很多很多網路上的都不能用 猜想是改版關係

上面這一套方法是合法的 所以應該可以長長久久吧

謝謝你提供這個 我之前試了N套 都失敗
Winster表示…
Hi, Chiou

之前您指導過我設定youtube 設delay time做AutoPlay功能,根據頻寬不同增加延遲秒數就可以了.
現在我想使用getPlayerState()來偵聽player ended (0)偵測是否播放結束.
我在code最後增加了:
function getPlayerState(){
var state = ytplayer.getPlayerState();
return state;
}
然後在function onStartMovie(){}裡面加上trace(ytplayer.getPlayerState());怎麼輸出視窗只出現 buffering (3)的訊息,播放結束也沒有輸出ended (0)訊息, 這是為什麼呢 ?
ps: using YouTube API example code for video linking.If anyone have any idea for me, you could reference this page :http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html

Thanks
Winster
B.R.
匿名表示…
奶綠老師,我想請問那有沒有flash 置入MSN SOAP 的方法呢?
milkmidi寫道…
請問什麼是msn soap呢
Leo寫道…
不好意思 我想問一下 奶綠大 是過將youtube api 寫入到air上

因為是過後 雖然可以播放 但不知道為什麼 youtube上方顯示標題變成亂碼(再按下播放之前是正常的)

後來用swf檔 卻是正常?
Vbpig寫道…
想請問大師的Demo包
要怎樣快速的學會使用呢??

因為我想要研究一下youtube的flash Api
因為Js api功能不太夠我使用
想經過flash api撰寫
不過之前都沒甚麼碰過flash.....

所以想請大師幫忙一下^^~
匿名表示…
拜讀大師的作品,成功載入Youtube影片,
可是現在用AS3+AIR發布到iPad
Youtube的播就失效了!
請問Flash/AIR如何在iOS播放Youtube影片?
milkmidi寫道…
AIR on iPad, 這個我沒試過,應該要可以才對
mz表示…
請問您貼出來的程式碼要如何使用?
因為我是flash新手
我在flash開啟一個新的檔案(AS3)
案F9直接把您提供的程式碼貼進去
但按下測試影片卻沒能成功跳出youtube
想請問一下是否少了什麼步驟

還有我載了SourceCode Dowmload裡的東西
卻不知道怎麼在flash軟體裡打開
想請問這份檔案怎麼使用
匿名表示…
你好~~
我想請問
我想用air for android寫一個小遊戲
裡面包含一個影片
在電腦上測試都正常
但放到android後就影片那部分無法播放了
可以請問是什麼問題嗎~
milkmidi寫道…
請問有原始檔嗎,這樣我比較知道你的問題是什麼
匿名表示…
老師你好~
我是上面那位
有原始檔
可是要怎麼Po上來
milkmidi寫道…
我的email
milkmidi@gmail.com

這個網誌中的熱門文章

超好用的無限免費網頁空間,無廣告,無流量限制

大家好,我是奶綠茶 今天來教大家如何申請一個無限免費速度又快的網頁空間 1 首先到  https://github.com/ 申請帳號(一直下一步,下一步,下一步) 2 到你的個人頁,切換上方的 tab 到 Repositories, 按下右鍵的 new 3 Repository name 一定要是這樣的格式 username.github.io 我的 github 網址是 github.com/milkmidi 那就要輸入 milkmidi.github.io 選擇 public, 這樣別人才看的到 private 有其他用途, 而且要付費才能使用 完成後按下 Create repository 5 安裝 SourceTree github 並不支援 FTP 或是網頁上傳,一定要透過指令碼 在這我們選用有圖型介面的軟體,方便大家學習 https://www.sourcetreeapp.com/ 下載並安裝 啟動後登入你的 github 帳號 6 clone 你的 github io 專案 右上角有個 Clone or download 點選後 複製 https 連結(不要選到 ssh ) 7 將 https 的連結貼到 SourceTree 8 上傳 html 到本機 github.io 資料夾,放一個 index.html 切換到 SourceTree, 這時會看到 Unstaged files 的欄位 選擇 Stage All 9 git 要求每次的 Commit, 都一定要打說明文字(好習慣) 輸入完成後,按下右邊的 Commit 10 發佈(Push),這樣就完成啦 可以到你的 http://milkmidi.github.io/ 去查看檔案有沒有出來 其他 Commit 可以想像是做一個記錄,你可以很多的 Commit 最後再一次 Push 上去 github 原本是給程式設計師用的版本控管服務 免費版提供無限空間讓你放檔案,但一定要是 public 想要有私有的 Project ,就只能付費 github.io 只能放靜態檔案,php, aspx 服務並不支援。 祝大家學習愉快 轉載請註明出處 奶綠的 github.io S

奶綠茶新書上市_密技公怖_程式碼下載

奶綠茶第一本 Flash 書籍上市啦 博客來書籍館 Flash 3D 特效宅急便 - 商業範例隨學隨 把我對 Flash 的研究與熱愛, 全寫在其中 本書的前幾章, 特別安排 ActionScript3.0 的許多範例 好讓你一步步瞭解 as2 和 as3 的差別 再安排製作動畫不可缺少的 Tweener 類別和一些常用的數學動畫公式 最後當然就來到本書的重點 PV3D 啦 從 PV3D 的原理, 基本架構一點一點的介紹 再透過許多實用的範例, 從中瞭解 PV3D 製作的小技巧 有任何書籍相關的問題, 也請不吝指教 感謝一路走來, 幫助過我的前輩們, 邦邦、Ticore、神魂、Maso、Erin 旗標出版社 小編 Bready 米蘭數位所有夥伴 米蘭數位ActionScript Team:Jason,Ash,Mark 本書大鋼: 1.ActionScript3.0概論 分析AS3的概念與語法, 從基本的滑鼠事件、外部載入、氣泡事件介紹起 適合熟悉AS2, 想轉戰AS3的人員。 2.程式碼製作動畫 使用簡單的數學公式, 套用到程式裡, 脫離死版的影格動畫。 3.製作動畫的好夥伴:Tweener 除了套用數學公式外, Tweener類別也能加速我們開發出更多的動畫效果, 不需辛辛苦苦的找公式。 4.自定類別 AS3的精神, 是在於強大的物件導向, 當然也要熟悉類別的寫法與使用。 5.Flash3D - Papervison3D 如果在Flash玩轉3D效果, PV3D是最好學, 最快上手的3D Flash Engine, 從簡單的3D概念, PV3D類別, 事件等。 6 漫天飛舞的Paper3DWorld效果 7 迷你旋轉木馬式秀圖效果 8 最經典! CoverFlow 圖像展示效果 9 天旋地轉 TiltViewer效果 10 FlatWall3D電視牆效果 11 經典旋轉木馬 Carousel3D 秀圖效果 12 光源材質展示與簡易型的方塊彈跳效果 13 載入外部3D模型與動畫 14 超立體旋轉九宮格 Box3DWorld 15 空間感與透明感兼具的 SpaceGallery 16 螺旋式 SpiralCarouse 影像展示 17 Flash10 3D功能 18 Flash效

奶綠茶photoGalleryV3.5

奶小茶的photoGalleryV3.5原始檔 2007/12/30 更新小Bug,請重新下載 線上Demo: http://milkmidi.com/photogallery/galleryv3.html 1.支援SWFAddress,讓FLASH可以有上一頁下一頁和每張獨立網址的功能 2.圖片路徑圖說經由XML來設定 3.背景依據顯示圖片,自動變化成最接近的顏色 4.非商業用途,歡迎使用並修改(如果覺得我製作的好,也煩請加入我的logo) 5.可結合後端伺服器 00.art 相本集資料夾 com 奶綠茶的Class檔 swfaddress SWFAddress資料夾 swfobject swfobject資料夾 XML galleryV3.fla 原始檔 index.html 主檔html SWFAddress.as SWFaddressEvent.as Source Code Download 解壓密碼:回覆文章,即可看見Password