2011年8月5日

AS3 - Youtube flash API‧flash載入youtube影片、自訂播放暫停按鈕


youtube flash api 官方發布已經有段時間了,但資質不夠一直沒看懂,最近在網路上有找到比較能理解的範例之後,終於有小小的成果了...只不過面版並沒有認真的設計,參考用的加減看看囉!



as3語法如下:


import com.greensock.*;

//指定YouTube Video ID
var myVideoID:String = "JwWML6fDnXw";

//自動播放:true, 不自動播放:false
var autoPlayVideo:Boolean = false;

// 用控制面版:true, 不用控制面版:false
var useControlPanelState:Boolean = false;

//重覆播放:true, 不重覆播放:false
var loopVideoState:Boolean = true;

//聲音大小,最大100,最小:0 (無聲)
var myVolume:Number = 50;

//有聲:false, 無聲:true
var muteVideoState:Boolean = false;




//Below Functions Are Edited By Perr Tang
var autoPlayState:String;
if (autoPlayVideo == true)
{
 autoPlayState = "&autoplay=1";
}
else
{
 autoPlayState = "";
}
var myVideoURL:String;
if (useControlPanelState == true)
{
 myVideoURL = "http://www.youtube.com/v/" + myVideoID + "?version=3" + autoPlayState;
}
else if (useControlPanelState == false)
{
 myVideoURL = "http://www.youtube.com/apiplayer?version=3&video_id=" + myVideoID + autoPlayState;
}
// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.;
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);


//loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=YHLWdb55iic&autoplay=1"));
loader.load(new URLRequest(myVideoURL));

function onLoaderInit(event:Event):void
{
 addChild(loader);
 loader.content.addEventListener("onReady", onPlayerReady);
 loader.content.addEventListener("onError", onPlayerError);
 loader.content.addEventListener("onStateChange", onPlayerStateChange);
 loader.content.addEventListener("onPlaybackQualityChange",
 onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void
{
 // Event.data contains the event parameter, which is the Player API ID
 trace("player ready:", Object(event).data);

 // Once this event has been dispatched by the player, we can use
 // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
 // to load a particular YouTube video.
 player = loader.content;
 // 指定影片大小Set appropriate player dimensions for your application
 player.setSize(580, 435);
 
 // 指定影片位置;
 player.x = 8;
 player.y = 8;
 player.alpha=0; 
 TweenLite.to(player, 0.5, {alpha:1});



 player.setVolume(myVolume);
 if (muteVideoState == true)
 {
  player.mute();
 }

}

function onPlayerError(event:Event):void
{
 // Event.data contains the event parameter, which is the error code
 trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void
{
 // Event.data contains the event parameter, which is the new player state
 trace("player state:", Object(event).data);
 if (Object(event).data == "0")
 {
  if (loopVideoState == true)
  {
   player.playVideo();
  }
  else
  {
   player.stopVideo();
  }
 }
}

function onVideoPlaybackQualityChange(event:Event):void
{
 // Event.data contains the event parameter, which is the new video quality
 trace("video quality:", Object(event).data);
}

//自訂播放按鈕

play_btn.addEventListener(MouseEvent.CLICK, playVid);
function playVid(e:MouseEvent):void
{
 player.playVideo();
}
play_btn.buttonMode = true;


//自訂暫停按鈕
pause_btn.addEventListener(MouseEvent.CLICK, pauseVid);
function pauseVid(e:MouseEvent):void
{
 player.pauseVideo();
}

pause_btn.buttonMode = true;



//自訂停止按鈕
stop_btn.addEventListener(MouseEvent.CLICK, stopVid);
function stopVid(e:MouseEvent):void
{
 player.stopVideo();
}
stop_btn.buttonMode = true;


//自訂靜音按鈕
mute_btn.addEventListener(MouseEvent.CLICK, muteVid);
function muteVid(e:MouseEvent):void
{
 player.mute();
}
mute_btn.buttonMode = true;


//自訂恢復音量按鈕

unmute_btn.addEventListener(MouseEvent.CLICK, unmuteVid);
function unmuteVid(e:MouseEvent):void
{
 player.unMute();
}
unmute_btn.buttonMode = true;

swf viewhttp://www.swfcabin.com/open/1312544932
參考範例:
http://www.republicofcode.com/tutorials/flash/as3youtube/
http://benlibra.blogspot.com/2011/03/as3-flashyoutube.html

綜合了二位所提供的語法,我也分享了一下,但目前完整度大概只有70%,希望最後可以研究出進度bar來!


2013.08.13,補上fla原始檔,有需要的朋友請拿去研究~ 下載請點我>>
(按鈕做得很醜,請不要真的拿去專案上使用...)
facebook討論

11 意見:

eRic on 2012年1月16日 上午11:37:00 提到...

*** Security Sandbox Violation ***
SecurityDomain 'http://s.ytimg.com/yt/swfbin/watch_as3-vfln2y8gL.swf' 嘗試存取不相容的內容 'file:///D|/1%5Fworks/intro%5F20120112/intro%5F20120112.swf'

請問一下我發布後會一直跳出這個
是正常的嗎?

milkmidi on 2012年1月16日 下午2:26:00 提到...

是正常的,那個可以不用理會他

匿名 提到...

為什麼我新增一個AS3的檔案把上面的語法貼進去後,撥放出來是空的的?
還是不能直接這樣貼?
sorry我剛學flash所以比較不懂

dog007 on 2012年3月8日 下午8:12:00 提到...

@eRic

真抱歉,blog留言都沒收到通知,現在才看到留言...
如milkmidi所說的,出現那個訊息是正常的。
flash有擋跨網域,所以as中有這段Security.allowDomain("www.youtube.com");



如果測試時也不想出現那個警告訊息,就可以改成 Security.allowDomain("*");

可以參考:http://blog.raienet.com/443

dog007 on 2012年3月8日 下午8:15:00 提到...

@milkmidi 竟然還勞駕milkmidi幫我回覆留言,太慚愧了...

趕快來把留言設為審核通知...

dog007 on 2012年3月8日 下午8:17:00 提到...

@�ΦW 匿名新手你好:這一篇教學我沒寫得很仔細,所以如果你直接貼上語法應該會出現一堆錯誤訊息吧...
你可以留mail我直接給你fla檔。

傑瑞林 on 2012年3月20日 上午11:46:00 提到...

請問 player = loader.content;

當player 參考了 此物件

去哪能看到此物件所擁有的函式呢?

想去增加一些功能的按鈕

dog007 on 2012年4月1日 下午5:09:00 提到...

@傑瑞林 你好,你要增加哪些功能?

匿名 提到...

請問可以增加播放進度表嗎?
另外可以控制從第幾秒開始播嗎?
麻煩你囉謝謝

邱勢璋 on 2013年12月12日 上午10:24:00 提到...

請問可以增加播放進度表嗎?
另外可以控制從第幾秒開始播嗎?
麻煩你囉謝謝

dog007 on 2013年12月12日 下午7:45:00 提到...

@���ռ�

進度表那個太難了我不知道~ sorry...

至於第幾秒開始播放這個很簡單,是否你自己有嘗試過了呢?

 

One Design Copyright © 2009 BeMagazine Blogger Template is Designed by Blogger Template
In Collaboration with fifa