Play youtube upon clicking button in flash movie using AS3 and Youtube API

Question

Please bear with me as I'm brand new to action script. I'm trying to build a small flash movie, that when a button is clicked in the movie, an embeded youtube video is displayed.

Building the movie is fine as I've some experience with basic flash animations, and I've followed the tutorial here to successfully embed a video on load and have it play when a button (that doesn't hide the video) is clicked.

I've tried moving the action script to load the video further down the timeline, which has caused errors, and have fiddled around with the click event to only display further down the, both have been unsuccessful though.

What I'd like to achieve is: Short flash movie that ends with a frame that reads "Play Video", when that's clicked, the frame disappears and the video starts to play.

Any help in the right direction is appreciated.

Thanks,

All the actionscript code should be on the first frame or in classes. Don't use frames for code. You shouldn't try to load the youtube video player into your flash (youtube skinning never worked well). Just replace your flash with the youtube player or use css to display the player. — moot

bribeiro bribeiro · Accepted Answer · 2014-08-06T19:09:12

Rough example:

// 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.
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"));

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(480, 360);
}

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);
}

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

more info: https://developers.google.com/youtube/flash_api_reference#Playback_controls

Play youtube upon clicking button in flash movie using AS3 and Youtube API

1 Answers