跳到主要內容

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
chiou寫道…
最近也遇到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 阿 ?
chiou寫道…
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.
chiou寫道…
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

這個網誌中的熱門文章

webpack2 入門實戰 1

大家好,我是奶綠茶
前端戰場不再只是寫寫 js / css , 各種框架、前處理工具百花齊放
身為前端工程師,不只要把程式寫完,還要寫好
老師說:選對好工具,事情就完成一半
如果你還在一隻 JS 打完全部程式,一隻 css 寫所有的 style
每次存檔還在手動 reload 網頁, 圖片壓 K 壓到不要不要的
透過奶綠伯的系列教學,讓你了解 webpack2 帶來的優勢
學會 webpack 可能不會加薪,但至少可以準時下班(誤)
1. 安裝 nodejs
請參考 gulp 安裝編

2. 安裝 global webpack , 筆者使用的是 2.2.1 版本
npm i webpack@2.2.1 -g
3. 在專案的根目錄放一隻 webpack.config.js
entry:你的主 js 進入點
output.filename:webpack 打包後的檔名
output.path:webpack 打包後的路徑
var path = require('path'); module.exports = { entry: './src/app.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
4. require , module.exports
現在前端都 module 化
可以每個獨立的功能都寫成單一的 js module
除了好管理,也方便讓團隊使用
寫一隻 module_exports_util.js
每隻經過 webpack 打包的 js , 都會是獨立的檔案
所以變數都是私有的, 外部成員都無法得到
在這個 module 裡,我們想開放二個函式
add , getName
所以在最後的 module.exports 指定
筆記加入 jsdoc , 為了方便在開發時,能夠有型別的提示

var name = "milkmidi"; /** * @param {number} num1 * @param {number} num2 * @return {number} */ function ad…

Android完全入門篇-01 安裝SDK與裝置USBDriver

大家好,我是奶綠茶
筆者以 Windows 系統來介紹安裝
1. 下載 Android SDK
http://developer.android.com/sdk/index.html
有分 32 位元和 64 位元的版本
為了教學方便,筆者將檔案放置在 D:\ 下
壓開後會有
eclipse資料夾:Eclipse程式碼編譯器
sdk:Android 開發用的 SDK
SDK Manager.exe:sdk管理用的軟體


2. 開啟手機的"開發人員選項"
部份手機該選項被隱藏起來了
要開啟的話,點選"關於手機"
接著連點"版本號碼"七次,就會重新開啟該功能
接著再開啟"USB偵錯"功能
接上你的 USB 線後
這樣你的電腦才能透過 USB 線來偵錯手機的資訊
3. 為裝置安裝 adb usb driver
因為各家廠牌的 Driver 都不同也不通用,所以需要自行 Google 找 Driver
可以用"XXX廠牌 型號 adb usb driver"關鍵字來找
例:HTC Newone adb usb driver
接著找到 我的電腦 / 內容


裝置管理員

會看到一個金嘆號未知的裝置, 按右鍵更新驅動程式軟體

選擇"瀏覽電腦上的驅動程式軟體"

完成後就會看到裝置啟動,並出現 XXX Android ADB Interface

4.測試是否連接成功
進入到第一步下載的 sdk 資料夾裡
D:\adt-bundle-windows-x86_64-20131030\sdk
然後在 platform-tools 資料夾上按住 Shift 鍵,然後再按滑鼠右鍵
選擇"在此處開啟命令視窗"
(此功能只有 Win7 之後的版本才支援, XP使用者就要自行輸入 dos 指令進入到資料夾)
輸入 adb devices
如果看到一串數字,並顯示 device 就表示連線成功
5.新增環境變數(選擇性設定)
為了方便的使用 adb 指令
可以為 windows 設定變數
開啟我的電腦 / 內容 / 左邊的"進階系統設定"
點選下方 環境變數

下方系統變數,找到 Path的選項,按下編輯

在變數值欄位的最後方加入
;D:\adt-b…

webpack2 入門實戰 3 scss,html,file-loader

大家好,我是奶綠茶
上一篇介紹了 webpack 的核心功能 loader
這篇再來補強各種常用的 loader
css-loader:解悉 css 檔
extract-loader:這個有點難翻,下面會介紹
file-loader:存成實體的檔案, 如圖片
html-loader:解悉 html 檔
sass-loader:解悉 scss 檔
url-loader:解悉圖片路徑
webpack.config.js
module.exports = { resolveLoader: { // 所有用到的 loader, -loader 可以不用打 moduleExtensions: [ "-loader" ], }, resolve: { // 在 require 檔案, 如果不想寫完整的路徑 // 可以加入這些目錄, 讓 webpack 自動尋找對的檔案 // 請注意我們加入了 src/img 路徑,後面會再介紹到 modules: [ path.resolve( 'src/html' ), path.resolve( 'src/img' ), path.resolve( 'src/css' ), path.resolve( 'src/js' ), path.resolve( "node_modules"), ], // 在 require 時可以不用打副檔名 extensions: [ ".js", ".scss" ] }, } 再來就是 loader 的介紹
scss
在這要做多組合的應用
先將 .scss 透過 scss-loader 轉換, 並產生 sourceMap 檔
再過 css-loader
最後再過 style-loader
{ test: /\.scss$/, // 多個 loader 組合, 可寫成一行,或…