En el artículo YouTube JavaScript Player API observé que la API de JavaScript de YouTube no expone ningún método para poner a toda pantalla el vídeo. Por lo tanto, si queremos crear nuestros propios controles en HTML para reproducir el vídeo y añadir un botón para visualizarlo a toda pantalla tendremos que usar la API Fullscreen de HTML5 sobre el player. El problema es que en la actualidad ninguna versión de Internet Explorer soporta la API Fullscreen de HTML5. La solución que usa el player Video.js para resolver este problema es que el botón de pantalla completa hace que el vídeo ocupe toda la ventana del navegador en los navegadores que no soportan la API Fullscreen. Es una solución elegante, pero no es Fullscreen, por lo que la solución ideal sería incrustar el vídeo en Flash mediante la API de AS3 y usar Fullscreen mode de AS3 que activaríamos desde un control en HTML mediante la clase ExternalInterface de AS3. Pero hay un inconveniente, según la documentación de la clase Stage, Flash sólo iniciará Fullscreen mode en respuesta a un click o a la presión de una tecla por parte del usuario:
Fullscreen mode is initiated in response to a mouse click or key press by the user; the movie cannot change Stage.displayState without user input. Flash runtimes restrict keyboard input in Fullscreen mode. Acceptable keys include keyboard shortcuts that terminate Fullscreen mode and non-printing keys such as arrows, space, Shift, and Tab keys. (Use Fullscreen interactive mode to support input from additional keys.) Keyboard shortcuts that terminate Fullscreen mode are: Escape (Windows, Linux, and Mac), Control+W (Windows), Command+W (Mac), and Alt+F4.
Supongo, que esta es la razón por la que YouTube no ofrece ningún método en la API para mostrar a pantalla completa el reproductor. Por ello, la única solución sería colocar un botón en el Flash.
Toda la documentación sobre el uso de AS3 con YouTube la tenemos en YouTube ActionScript 3.0 Player API Reference y será la guía que usaré para realizar los ejemplos. La AS3 API permite insertar en una aplicación Flash el reproductor de YouTube con controles, chromeless player, o sin controles, embedded player. Si usamos el chromeless player el único control que se cargará es el botón play que se superpone sobre la miniatura de vídeo que aparece antes de la reproducción del mismo. Para cargar el chromeless player tendremos que usar la siguiente URL para cargar el player en nuestro Flash:
|
1 |
http://www.youtube.com/apiplayer?version=3 |
Para cargar el embedded player la URL que tendremos que usar será la siguiente. Tendremos que sustituir el string VIDEO_ID con el id del vídeo de YouTube:
|
1 |
http://www.youtube.com/v/VIDEO_ID?version=3 |
Para usar la API de JavaScript con los reproductores de Flash tendremos que añadir enablejsapi=1 a la URL del reproductor:
|
1 |
http://www.youtube.com/apiplayer?version=3&enablejsapi=1 |
Veamos ahora un ejemplo de uso básico en el que cargamos el chromeless player y añadimos un control con el que podemos hacer play o pause usando la API AS3. De la misma forma que hemos usado la API AS3 para crear los botones Play y Pause podríamos crear el resto de botones para crear una barra de controles personalizada.
El código del ejemplo es el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
package { import flash.display.*; import flash.net.*; import flash.system.*; import flash.events.*; import flash.external.ExternalInterface; import flash.text.*; public class ChromelessYouTubePlayer extends Sprite { Security.allowDomain("www.youtube.com"); private var player:Object; private var loader:Loader = new Loader(); private var _state:String; private var tf1:TextField; private var textPlayed:String = "<a href='event:null'><u>Pause</u></a>"; private var textPaused:String = "<a href='event:null'><u>Play</u></a>"; // CONSTRUCTOR public function ChromelessYouTubePlayer() { loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit); loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3")); //Button; tf1 = createCustomTextField(5,330,50,22); tf1.htmlText = textPaused; tf1.addEventListener(MouseEvent.CLICK, playOrPauseVideo); } private function onLoaderInit(event:Event):void { addChild(loader); loader.content.addEventListener("onReady", onPlayerReady); loader.content.addEventListener("onError", onPlayerError); loader.content.addEventListener("onStateChange", onPlayerStateChange); } private function onPlayerReady(event:Event):void { // Event.data contains the event parameter, which is the Player API ID trace("player ready:", Object(event).data); player = loader.content; // Set appropriate player dimensions for your application player.setSize(580, 326); player.cueVideoByUrl("http://www.youtube.com/v/9BaFnsvKAiA?version=3"); } private function onPlayerError(event:Event):void { // Event.data contains the event parameter, which is the error code trace("player error:", Object(event).data); } private function onPlayerStateChange(event:Event):void { // Event.data contains the event parameter, which is the new player state var state:Number = Object(event).data; // update our status switch ( state ) { case -1 : _state = "unstarted"; break; case 0 : _state = "ended"; break; case 1 : _state = "playing"; tf1.htmlText = textPlayed; break; case 2 : _state = "paused"; tf1.htmlText = textPaused; break; case 3 : _state = "buffering"; break; case 5 : _state = "video cued"; break; } } private function playOrPauseVideo(event:Event):void { if (_state == "playing") { player.pauseVideo(); } else { player.playVideo(); } } private function createCustomTextField(x:Number, y:Number, width:Number, height:Number):TextField { var result:TextField = new TextField(); result.x = x; result.y = y; result.width = width; result.height = height; result.selectable = false; var format:TextFormat = new TextFormat(); format.font = "Arial"; format.size = 12; format.color = 0xFF0000; result.defaultTextFormat = format; addChild(result); return result; } } } |
Ahora voy a poner un ejemplo del embedded player pero sólo con la programación necesaria para mostrar lo sencillo que es incrustar un vídeo de YouTube en nuestra aplicación Flash.
El código de este ejemplo sería:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package { import flash.display.*; import flash.net.*; import flash.system.*; import flash.events.*; public class embeddedYouTubePlayer extends Sprite { Security.allowDomain("www.youtube.com"); private var player:Object; private var loader:Loader = new Loader(); // CONSTRUCTOR public function embeddedYouTubePlayer() { loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit); loader.load(new URLRequest("http://www.youtube.com/v/9BaFnsvKAiA?version=3")); } private function onLoaderInit(event:Event):void { addChild(loader); loader.content.addEventListener("onReady", onPlayerReady); } private function onPlayerReady(event:Event):void { player = loader.content; player.setSize(580, 360); } } } |
Ahora vamos a crear un botón que nos permita poner en Fullscreen mode nuestra aplicación Flash con el reproductor de YouTube.
La función para poner en Fullscreen mode sería la siguiente. Además podríamos utilizar la API AS3 de YouTube para cambiar la resolución del vídeo al poner éste en Fullscreen mode.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
private function toggleFullScreen(event:MouseEvent):void { switch(stage.displayState) { case "normal": stage.displayState = "fullScreen"; tf1.htmlText = textNormalScreen; break; case "fullScreen": default: stage.displayState = "normal"; tf1.htmlText = textFullScreen; break; } } |
Pero el problema no es usar Fullscreen mode en un flash sino poner el Flash en este modo desde HTML, ya que, como vimos anteriormente sólo es posible a través de un click o pulsación de una tecla por parte del usuario. Por ello, la única solución posible sería simular un botón en HTML que no se pudiera pulsar y que estuviera sobre el botón que nos muestra el Flash en Fullscreen mode para que fuera éste el que pulsara el usuario. Si quisiéramos crear nuestros propios controles en los que se incluyera el botón de pantalla completa deberíamos comprobar si el navegador soporta la API Fullscreen de HTML5. Si no la soportara cargaríamos nuestra versión Flash del reproductor si el navegador dispone de Flash.
Tags: ActionScript API Flash YouTube
