In the post YouTube JavaScript Player API, I appreciated that the YouTube JavaScript API does not have any method to show the video in full screen mode. Therefore, if we want to create our own HTML controls to play the video and add a button to display it in full screen mode we will have to use the HTML5 Fullscreen API on the player. The problem is that currently no version of Internet Explorer supports HTML5 Fullscreen API. The solution that uses the player Video.js to solve this problem is that the full screen button makes the video fill the browser window in browsers that do not support Fullscreen API. It is a smart solution, but it is not Fullscreen, so the ideal solution, to solve it, would be to embed the video into a Flash using the AS3 API and to use AS3 Fullscreen mode activated from an HTML control using AS3 ExternalInterface class. But there is a drawback, according to the Stage class documentation, Flash will only start Fullscreen mode in response to a click or key press by the user in the Flash:
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.
I suppose that this is the reason because YouTube does not provide any method in the API to display in full screen mode the player. Therefore, the only solution would be to place a button in the Flash.
We have all the documentation about using AS3 with YouTube in YouTube ActionScript 3.0 Player API Reference and it will be the guide that I will use for the examples. The AS3 API allows you to insert into a Flash application the YouTube player without controls, chromeless player, or with controls, embedded player. If we use the chromeless player the only control that will be loaded is the play button which is overlapped over the video thumbnail that appears before playing it
We will have to use the following URL to load the chromeless player in our Flash:
|
1 |
http://www.youtube.com/apiplayer?version=3 |
To load the embedded player, we will have to use the following URL and to replace the string VIDEO_ID with the YouTube Video id:
|
1 |
http://www.youtube.com/v/VIDEO_ID?version=3 |
To use the JavaScript API with Flash players, we will have to add enablejsapi=1 to the URL of the player:
|
1 |
http://www.youtube.com/apiplayer?version=3&enablejsapi=1 |
Here is an example of basic use in which we load the chromeless player and add a control with which we can play or pause it, using the AS3 API. In the same way we could create the other buttons to create a custom control bar.
The code of the example is the following:
|
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; } } } |
Now, I will give an example of the embedded player, but only with the required programming to show how easy it is to embed a YouTube video on our Flash application.
The code of this example is the following:
|
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); } } } |
Now, I am going to create a button that allows us to put our Flash application in Fullscreen mode with the YouTube Player.
The function to set it in Fullscreen mode would be the following. We may also use the YouTube AS3 API to change the video resolution to put it in 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; } } |
But the problem is not using full screen mode in a flash but putting flash in this mode from HTML, because, as we saw earlier, it is only possible through a click or key press by the user on the Flash. Therefore, the only solution would be to simulate a HTML button that can not be pressed and that is over the button that shows the Flash in Fullscreen mode in order to be pressed this by the user. If we want to create our own controls, which include the full screen button, we should check whether the browser supports HTML5 Fullscreen API. If it does not support it, it would load the Flash version of the player, if the browser supports or has the Flash player.
Tags: ActionScript Flash Fullscreen YouTube
