My Full Screen Video App – Ver 1.0

I wrote about full screen support in flash, a long time back in Nov ’06 (see that post here). I have been planning to write one myself. So finally i got myself down to write it. Before i put you through the app, some details on the API.

To make your application have a fullscreen support you need to do the following things.

1) Have the latest Flash Player (get it here)

2) Use the new Full Screen API
import flash.display.StageDisplayState into your Application and set the displayState of the stage. I have the following function toggling the FullScreen feature. “fsChk” is a CheckBox, based on which I’m toggling the functionality

private function toggleFullScreen():void{

stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);


if(fsChk.selected) {
stage.displayState = StageDisplayState.FULL_SCREEN}
else {
stage.displayState = StageDisplayState.NORMAL}

}


3) Update the html-template in which you have the flash App

In the object & embed parts of the html code of the page in which the flash app is inserted, you need to add a new parameter allowFullScreen to true. You can refer the source of the app and view the html for details.

If you want to know more about this feature, refer the Adobe DevCenter article on the same or view the PDF that i have created, collating all that information.

Now the Application. This is just a small video player which can go full screen by checking a Flex CheckBox. This is written in Flex2.0 and you can find all the source files here

Click here to view the Application
(confirm that you have the latest Flash player)

P.S – I have muted the video to start with, un-mute it if it pleases you :)

Update March 07 2008: A lot of people have complained that they got a security error when they tried using the code above. Here is a post articulating the problem and the solution.

About these ads

20 Responses to My Full Screen Video App – Ver 1.0

  1. Anonymous says:

    Hey there,

    Thanks for the info, but I’m getting nothing from this link:

    http://www.cetec77.com/kannan/FSVideo/JustFullScreen.html

    Mac OSX 10.4.8
    Firefox 2.0.0.2

    Thoughts?

    ken

  2. Raghu says:

    Hi Ken,

    I tried it on my mac and it works. I have a MAC 10.4.8 with Firefox 1.5.0.10

    Looks like the player detection code is not properly put in… See if you have the latest player. If it still persists, drop me a mail at “rrao at adobe dot com”

  3. Raghu says:

    I’ll try to put my player detection code in palce by then :)

  4. Fabio says:

    To solve the problem you can use the applicationComplete event instead of creationComplete.

  5. kanu kukreja says:

    Hi Raghu,

    I’m trying to run this application and whenever i click on checkbox i’m getting the Alert with the following error.Can you please explain me the solution for this problem.
    “SecurityError: Error #2152″

    kanu

  6. raghunathrao says:

    @Kanu – Do you have the right player – check it out here http://www.macromedia.com/software/flash/about/

  7. […] using ContextMenu I had, long back written a post on how to take an application full screen. This is an extension to that. What I am doing is adding the “Go Full Screen” and […]

  8. oviyan says:

    I have the flash player(9,0,47,0).But the fullscreen not working and it shows “SecurityError: Error #2152″.

    May i know the reason why im not able to get.

  9. […] I had posted a couple of posts earlier (the contextMenu based fullscreen & the fullScreenVideo) where it required you to edit the html wrapper in which the Flex App SWF is embedded. A lot of […]

  10. raghunathrao says:

    @ oviyan/kanu – This should solve your problem

  11. raghunathrao says:

    You require Flash player (9,0,115,0) for full screen to work

  12. Ajay says:

    hi,
    i tried the above full screen example…but the screen is getting full screen but the size of the player remains the same…can u help?

  13. Ajay says:

    Hi Raghu,

    does the code u wrote for full screen supports flex2?

  14. Ajay says:

    i dont want the panel and videodisplay width and height to be 100%. if both are in numbers like width =400, height=400 for panel and full screen will the full screen function work?

  15. raghunathrao says:

    @ Ajay – I think it works in Flex 2 too, but you need the right player to run it

  16. Arindam Mojumder says:

    Hello Sir,

    I am using your code [JustFullScreen.mxml ]. But whenever I am running the code it is showing the run time error, pasted below. I really can’t understand the error. Can you please help me.

    ======================================
    SecurityError: Error #2148: SWF file file:///C:/Documents and Settings/Arindam/Desktop/SUPER FLEX/flv player flex/bin/index.swf cannot access local resource file:///C:/Documents and Settings/Arindam/Desktop/SUPER FLEX/flv player flex/bin/video/c.flv. Only local-with-filesystem and trusted local SWF files may access local resources.
    at flash.net::NetStream/play()
    at mx.controls.videoClasses::VideoPlayer/::_play()
    at mx.controls.videoClasses::VideoPlayer/::setUpStream()
    at mx.controls.videoClasses::VideoPlayer/::_load()
    at mx.controls.videoClasses::VideoPlayer/load()
    at mx.controls::VideoDisplay/load()
    at mx.controls::VideoDisplay/::autoPlaying()
    at mx.controls::VideoDisplay/::creationCompleteHandler()
    at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()
    at mx.core::UIComponent/set initialized()
    at mx.managers::LayoutManager/::doPhasedInstantiation()
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/::callLaterDispatcher2()
    at mx.core::UIComponent/::callLaterDispatcher()
    ===================================

    this is my code. I just change the name of my flv source=”video.c.flv”

    ———————————————

    “;
    myVD.pause();
    }
    }

    private function updateSlider():void {
    if(!sliderPressFlag){
    myHS.value = myVD.playheadTime;
    }
    else{
    sliderPressFlag = !sliderPressFlag;
    myVD.playheadTime = myHS.value;
    }

    }

    private function muteOnOff():void{
    if(mute.selected){myVD.volume = 0; }
    else {myVD.volume = 0.75}
    }

    private function loadVideo():void{
    myHS.maximum =myVD.totalTime;
    }

    private function toggleFullScreen():void{
    try{
    stage.addEventListener(FullScreenEvent.FULL_SCREEN, handleFullScreen);
    if(fsChk.selected) {stage.displayState = StageDisplayState.FULL_SCREEN}
    else {stage.displayState = StageDisplayState.NORMAL}
    }
    catch(err:Error){
    Alert.show(err.toString());
    }
    }
    private function thumbPressed():void{
    if(myVD.playing){
    pauseFlag = true;
    playpause.label = “>”;
    myVD.pause();
    sliderPressFlag=true; wasPlaying=true;
    updateSlider();
    }
    }
    private function thumbReleased():void{
    sliderPressFlag=true; updateSlider();
    }

    ]]>

    ” id=”playpause” click=”playPause()” width=”25″ height=”25″ cornerRadius=”20″/>

    —————————————-

  17. Simon says:

    Hi,
    can you publish the *.fla please
    it would help me alot
    i need to know how to make full screen work on a webpage.

  18. Lele says:

    just wanted to say thank you for such and awesome post and for providing all the support and code to make this happen … Im still learning Flex and this has been invaluable to me!

    Many Thanks again! :)

  19. Sangeeth says:

    Thanks Raghu for the post.

    And for those who are getting the security error display, just add this code in four places in index.template.html in the html-template folder. This works for me

    allowFullScreen=”true”

    So the wrapper html will be like this :

    AC_FL_RunContent(
    “src”, “playerProductInstall”,
    “FlashVars”, “MMredirectURL=”+MMredirectURL+’&MMplayerType=’+MMPlayerType+’&MMdoctitle=’+MMdoctitle+””,
    “width”, “${width}”,
    “height”, “${height}”,
    “align”, “middle”,
    “id”, “${application}”,
    “quality”, “high”,
    “bgcolor”, “${bgcolor}”,
    “name”, “${application}”,
    “allowScriptAccess”,”sameDomain”,
    “allowFullScreen”,”true”,
    “type”, “application/x-shockwave-flash”,
    “pluginspage”, “http://www.adobe.com/go/getflashplayer”
    );
    } else if (hasRequestedVersion) {
    // if we’ve detected an acceptable version
    // embed the Flash Content SWF when all tests are passed
    AC_FL_RunContent(
    “src”, “${swf}”,
    “width”, “${width}”,
    “height”, “${height}”,
    “align”, “middle”,
    “id”, “${application}”,
    “quality”, “high”,
    “bgcolor”, “${bgcolor}”,
    “name”, “${application}”,
    “allowScriptAccess”,”sameDomain”,
    “allowFullScreen”,”true”,
    “type”, “application/x-shockwave-flash”,
    “pluginspage”, “http://www.adobe.com/go/getflashplayer”
    );
    } else { // flash is too old or we can’t detect the plugin
    var alternateContent = ‘Alternate HTML content should be placed here. ‘
    + ‘This content requires the Adobe Flash Player. ‘
    + ‘Get Flash‘;
    document.write(alternateContent); // insert non-flash content
    }
    // –>

  20. Narasimha says:

    Thanks a lot Raghu.

    It is very useful info……

    Thanks & Regards,
    Venkata Reddy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.