Video di YouTube dentro il nostro Player Personalizzato
di Marcello Ruta
Tool utilizzati: Flash CS4
Requisiti: Cononoscenze di Actionscript 3.0
Assets Finali: PlayerTube.fla, PlayerTube.as
Reference YouTube Api: http://code.google.com/intl/it-IT/apis/youtube/flash_api_reference.html
Premessa
In questo breve esercizio vedremo come con le API di AS3 controlleremo un video player di YouTube caricato dentro la nostra applicazione Flash, il tutto viene fatto via ActionScript. Sfruttando le API possiamo: mettere in Play il nostro video, impostare il volume, mettere in Mute il player e sfruttare altre funzionalità che ci vengono messe a disposizione dalle YouTube ActionScript 3.0 API.
Adesso configuriamo la nostra area di lavoro di Flash.
Apriamo Flash CS4 e creiamo un filmato che abbia le seguenti dimensioni 660x500, rinominiamo il Layer 1 in action e ci creiamo la nostra classe PlayerTube.as. Fatte queste configurazioni salviamo il nostro file con il nome PlayerTube.fla.
Assets
Prepariamo gli assets che ci serviranno per sviluppare alcune funzionalità del nostro Player. In questa fase prepareremo un pulsante per il play del video, uno per mettere il video in pausa, un pulsante con due frame interni per mettere in mute il nostro video ed infine una progressBar per mostrare il caricamento del video. I nostri pulsanti avranno i seguenti nomi:
- BtnPlay_mc (come Linkage → nel nome della Classe diamo BtnPlay),
- BtnPause_mc (come Linkage → nel nome della Classe diamo BtnPause),
- BtnMute_mc (come Linkage → nel nome della Classe diamo BtnMute),
- ProgressBar_mc (come Linkage → nel nome della Classe diamo SeekProgressBar)
A questo punto le assets del nostro filmato sono pronte, quindi ci possiamo concentrare nella scrittura della Classe PlayerTube.as
PlayerTube.as
Useremo il seguente URL per caricare il chromeless player dentro la nostra applicazione, dopodiché applicheremo alcune funzionalità per il controllo del nostro video.
http://www.youtube.com/apiplayer?version=3
player.loadVideoById(videoId:String, startSeconds:Number, suggestedQuality:String):Void
Carica ed esegue un video specifico. Per questo metodo sono ammessi i seguenti parametri:
videoId che è un parametro che specifica l’ID del video di YouTube da eseguire, questo parametro è Required mentre gli altri due parametri (startSeconds:Number, suggestedQuality:String) sono opzionali.
player.playVideo():Void
Mette in Play il video corrente.
player.pauseVideo():Void
Mette in pausa il video che è in Play.
player.mute():Void
Mette in mute il player.
player.unMute():Void
Con l'azione unmute, mettiamo il player in unMute ovvero ripristiniamo l'audio.
Dopo aver visto le azioni che andremo ad utilizzare nel nostro tutorial, passiamo al codice:
package
{
import flash.display.Sprite;
import flash.system.*;
import flash.display.*;
import flash.events.*;
import flash.net.*;
Security.allowInsecureDomain("*");
Security.allowDomain("*");
/**
* Configuriamo la grandezza del nostro filmato.
*/
[SWF(width = 660, height = 500, backgroundColor = 0xffffff)]
public class PlayerTube extends Sprite
{
private var tubePlayer:Object;
private var loader:Loader;
private var apiPlayer:String = "http://www.youtube.com/apiplayer?version=3"; // URL delle api del player di youtube
private var urlVideo:String = "http://www.youtube.com/watch?v=UdY9COYq0hs"; // URL del vfilmato swf che vogliamo caricare
private var splitURL:String;
/**
* Istanziamo i pulsanti che sono nella nostra Libreria,
* Istanziamo la MovieClip della barra di progresso
*/
private var btnPause:BtnPause = new BtnPause();
private var btnPlay:BtnPlay = new BtnPlay();
private var btnMute:BtnMute = new BtnMute();
private var _seekBar:SeekProgressBar = new SeekProgressBar();
private var preloadBar:SeekProgressBar = new SeekProgressBar();
private var muteState:Boolean;
public function PlayerTube()
{
splitURL = urlVideo.split("=")[1];
//trace(splitURL);
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest(apiPlayer));
/**
* Aggiungiamo alla DisplayList le nostre risorse
* precedentemente istanziate.
*/
addChild(btnPlay);
btnPlay.x = 10;
btnPlay.y = 380;
btnPlay.buttonMode = true;
addChild(btnPause);
btnPause.x = btnPause.width + 20;
btnPause.y = 380;
btnPause.buttonMode = true;
addChild(btnMute);
btnMute.x = btnMute.width + btnPause.width + 30;
btnMute.y = 380;
btnMute.buttonMode = true;
addChild(_seekBar);
_seekBar.y = 360;
_seekBar.x = 10;
_seekBar.scaleX = 0;
addChild(preloadBar);
preloadBar.y = 360;
preloadBar.x = 10;
preloadBar.alpha = .7;
btnPause.addEventListener(MouseEvent.CLICK, onPauseVideo);
btnPlay.addEventListener(MouseEvent.CLICK, onPlayVideo);
btnMute.addEventListener(MouseEvent.CLICK, onMuteVideo);
}
private function onLoaderInit(e:Event):void
{
addChild(loader);
loader.x=10;
loader.y=10;
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
}
private function onPlayerReady(e:Event):void
{
tubePlayer = loader.content;
startVideo();
}
private function startVideo():void
{
tubePlayer.loadVideoById(splitURL);
tubePlayer.setSize(560, 340);
}
private function onPauseVideo(e:MouseEvent):void
{
tubePlayer.pauseVideo();
removeEventListener(Event.ENTER_FRAME, onProgress);
}
private function onPlayVideo(e:MouseEvent):void
{
tubePlayer.playVideo();
addEventListener(Event.ENTER_FRAME, onProgress);
}
private function onMuteVideo(e:MouseEvent):void
{
if (btnMute.currentFrame == 1)
{
btnMute.gotoAndStop(2);
muteState = true;
tubePlayer.mute();
} else {
btnMute.gotoAndStop(1);
muteState = false;
tubePlayer.unMute();
}
}
private function onPlayerError(e:Event):void
{
}
private function onPlayerStateChange(e:Event):void
{
addEventListener(Event.ENTER_FRAME, onProgress);
}
private function onProgress(e:Event):void {
_seekBar.scaleX = 0;
var bTotal:Number = tubePlayer.getVideoBytesTotal();
var bLoaded:Number = tubePlayer.getVideoBytesLoaded();
var percent:Number = Math.floor((bLoaded / bTotal)*100);
var sc:Number = percent/100;
_seekBar.scaleX = sc;
}
private function onVideoPlaybackQualityChange(e:Event):void
{
}
}
}
In allegato troverete un file zip, che contiene il sorgente, il file della classe e un documento pdf relativo all'esercizio.
Video di YouTube dentro il nostro Player Personalizzato