Fullscreen option for working for a videoDisplay control embedded in a HTML page
If I have a flex swc emebbed in my html page, and the flex swc contains an flex 4 videoDisplay player, which has an option for fullscreen. How do I make the fullscreen work.
Because when I click on fullscreen button for the videaDisplay, I get an error:
SecurityError: Error #2152: Full screen mode is not allowed.
at flash.display::Stage/set_displayState()
at flash.display::Stage/set displayState()
at spark.components::VideoPlayer/fullScreenButton_clickHandler()
But the fullscreen option works fine if I run the flex application itself.
My html code looks like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body onload="MM_preloadImages('assets/index_main/images/nav-features-over.gif','assets/index_main/images/nav-signup-over.gif','assets/index_main/images/nav-pricing-over.gif')">
<div align="center">
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="500" bgcolor="#C2E8F3" class="pricingBG"><div align="center">
<p>
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,1,0,0','width','1024','height','1850','src','cloud_tour','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','cloud_tour' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,1,0,0" width="1024" height="1850">
and the Flex code looks like:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundColor="#FFFFFF" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
fontFamily="Arial" fontSize="13" width="1024" height="1850" verticalGap="20"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
xmlns:controls="com.fxcomponentsWei.controls.*" xmlns:s="library://ns.adobe.com/flex/spark">
<mx:Script>
<![CDATA[
import mx.containers.Canvas;
private const VIDEO_SRC_MY_FILES:String = 'assets/index_main/videos/my_files.flv';
private const VIDEO_SRC_CALENDAR:String = 'assets/index_main/videos/calendar.flv';
private const VIDEO_SRC_PROFILE_EXPLORER:String = 'assets/index_main/videos/profile_explorer.flv';
private const VIDEO_SRC_GROUPS:String = 'assets/index_main/videos/groups.flv';
private function handlePlay(e:Event):void
{
var cvs:Canvas = e.currentTarget.parent.parent as Canvas;
var vid:VideoPlayer = cvs.getChildByName('vid') as VideoPlayer;
vid.enabled = true;
switch(e.currentTarget.data)
{ //assign vid source
case 'my_files':
vid.source = VIDEO_SRC_MY_FILES;
break;
case 'calendar':
vid.source = VIDEO_SRC_CALENDAR;
break;
case 'profile_explorer':
vid.source = VIDEO_SRC_PROFILE_EXPLORER;
break;
case 'groups':
vid.source = VIDEO_SRC_GROUPS;
break;
default:
throw new Error('invalid video request');
}
cvs.removeChild(e.currentTarget.parent); //remove play box button
}
]]>
</mx:Script>
<s:VideoDisplay name="test" id="blah" width="320" height="160"
source="assets/index_main/videos/my_files.flv"/>
<mx:Canvas width="500" height="300">
<s:VideoPlayer name="vid" width="100%" height="100%" autoPlay="true" autoRewind="true"
enabled="false"/>
<mx:Box backgroundColor="#FFFFFF" width="100%" height="100%" backgroundAlpha="0.5"
verticalAlign="middle" horizontalAlign="center">
<mx:Image source="assets/index_main/images/play-128x128.png" click="handlePlay(event)"
data="{'my_files'}" buttonMode="true" toolTip="click to play"/>
</mx:Box>
</mx:Canvas>
<mx:Text width="600">
<mx:htmlText>
<![CDATA[
<b>My Files</b>
Want the ability to access, share and manage files from wherever you happen to be, without having to invest in expensive technology or IT staff? Cloud makes it simple and affordable to store and manage all your digital content – from financial, creative and productivity documents to image, audio and video files – right from your laptop, your smartphone or any other web-enabled device.
]]>
</mx:htmlText>
</mx:Text>
<mx:Canvas width="500" height="300">
<s:VideoPlayer name="vid" width="100%" height="100%" autoPlay="true" autoRewind="true"
enabled="false"/>
<mx:Box backgroundColor="#FFFFFF" width="100%" height="100%" backgroundAlpha="0.5"
verticalAlign="middle" horizontalAlign="center">
<mx:Image source="assets/index_main/images/play-128x128.png" click="handlePlay(event)"
data="{'profile_explorer'}" buttonMode="true" toolTip="click to play"/>
</mx:Box>
</mx:Canvas>
<mx:Text width="600">
<mx:htmlText>
<![CDATA[
<b>Profile Explorer</b>
Connect other services to your profile, and keep in touch with all your friends in the Cloud and beyond. See what you're sharing with others, and what your friends are saying about you.
]]>
</mx:htmlText>
</mx:Text>
<mx:Canvas width="500" height="300">
<s:VideoPlayer name="vid" width="100%" height="100%" autoPlay="true" autoRewind="true"
enabled="false"/>
<mx:Box backgroundColor="#FFFFFF" width="100%" height="100%" backgroundAlpha="0.5"
verticalAlign="middle" horizontalAlign="center">
<mx:Image source="assets/index_main/images/play-128x128.png" click="handlePlay(event)"
data="{'calendar'}" buttonMode="true" toolTip="click to play"/>
</mx:Box>
</mx:Canvas>
<mx:Text width="600">
<mx:htmlText>
<![CDATA[
<b>Calendar</b>
Organizing your schedule shouldn't be a burden. With the Cloud Calendar, it's easy to keep track of life's important events all in one place. You can invite other people to events on your calendar. Guests can RSVP to your events by email or via Cloud Calendar or Access your calendar however and whenever you want by syncing events with Microsoft Outlook, Apple iCal, Mozilla Sunbird or your smartphone.
]]>
</mx:htmlText>
</mx:Text>
<mx:Canvas width="500" height="300">
<s:VideoPlayer name="vid" width="100%" height="100%" autoPlay="true" autoRewind="true"
enabled="false"/>
<mx:Box backgroundColor="#FFFFFF" width="100%" height="100%" backgroundAlpha="0.5"
verticalAlign="middle" horizontalAlign="center">
<mx:Image source="assets/index_main/images/play-128x128.png" click="handlePlay(event)"
data="{'groups'}" buttonMode="true" toolTip="click to play"/>
</mx:Box>
</mx:Canvas>
<mx:Text width="600">
<mx:htmlText>
<![CDATA[
<b>Groups</b>
Connect with the people you need to get the job done. Unlike other tools, Cloud Groups lets you work with anyone, whether they’re inside or outside the company firewall. Invite them into Cloud Groups to work together on projects, share files, assign tasks or catch up in real-time.
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
Thanks and Regards ~Z~
I would recommend you use SWFObject to embed your Flex swf into an html website. From a cursory glance, it seems you're missing the allowFullScreen parameter that needs to be set to true.
加载中,请稍侯......
精彩评论