Flash全屏功能测试

Submitted by kinglong on 2007-1-10 14:55:25

Flash全屏功能测试
在线测试页面：http://www.klstudio.com/demo/as/fullscreen/fullscreen.html
相关资料文件：http://www.klstudio.com/demo/as/fullscreen/fullscreen.rar

<div id="flashcontent"></div>
<script language="javascript" src="js/swfobject.js"></script>
<script language="JavaScript">
   var orginFlash = {init:false,isFullScreen:false,position:"",top:"",left:"",width:"",height:""};
   function writeFlash(){
     var so = new SWFObject("fullscreen.swf", "fplayer", "100%", "100%", 8, "#FFFFFF");
     so.addParam("quality", "high");
     so.addParam("swLiveConnect", "true");
     so.addParam("menu", "false");
     so.addParam("allowScriptAccess", "sameDomain");
     so.addParam("allowFullScreen", "true");
     so.write("flashcontent");
   }
    function getScreenSize(){
      var w = 0;
      var h = 0;
      if( typeof( window.innerWidth ) == 'number' ) {
        w = window.innerWidth;
        h = window.innerHeight;
     } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
       w = document.documentElement.clientWidth;
       h = document.documentElement.clientHeight;
     } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
       w = document.body.clientWidth;
       h = document.body.clientHeight;
     }
     return {width:w,height:h};
   }
    function fullScreen(){
      if(!orginFlash.init){
        orginFlash.position = document.getElementById("flashcontent").style.position;
        orginFlash.top = document.getElementById("flashcontent").style.top;
        orginFlash.left = document.getElementById("flashcontent").style.left;
        orginFlash.width = document.getElementById("flashcontent").style.width;
        orginFlash.height = document.getElementById("flashcontent").style.height;
     }
     orginFlash.init = true;
     orginFlash.isFullScreen = true;
     var screenSize = getScreenSize();
     try{
       document.getElementById("flashcontent").style.position = "absolute";
       document.getElementById("flashcontent").style.top = "0px";
       document.getElementById("flashcontent").style.left = "0px";
       document.getElementById("flashcontent").style.width = screenSize.width +"px";
       document.getElementById("flashcontent").style.height = screenSize.height +"px";
       document.body.style.overflow="hidden";
       window.scrollTo(0,0);
     }catch(e){
     }
   }
   function normal(){
     if(orginFlash.init){
       orginFlash.isFullScreen = false;
       try{
         document.getElementById("flashcontent").style.position = orginFlash.position;
         document.getElementById("flashcontent").style.top = orginFlash.top;
         document.getElementById("flashcontent").style.left = orginFlash.left;
         document.getElementById("flashcontent").style.width = orginFlash.width;
         document.getElementById("flashcontent").style.height = orginFlash.height;
         document.body.style.overflow="auto";
       }catch(e){
       }
    }
   }
   function reSize(){
      if(orginFlash.isFullScreen){
         fullScreen();
      }
    }
   window.onresize = reSize;
   writeFlash();
</script>

P.S.
1、flash全屏功能代码部分参考网上资料。
2、flash全屏功能在IE6以上，flash player 7.0以上 浏览器环境中测试可以运行！
3、flash全屏功能通过两种方式实现，flash player版本号在9.0.18.60以上 是通过flash 9内部代码实现的，而低于这个版本的则是通过js + div来实现的！
4、通过flash 9新功能来实现全屏技术要注意以下几点：
      a、flash player版本必须是 9.0.18.60或更高版本；
      b、调用全屏功能代码需通过触发事件才可以运行的，如onPress,onRelease事件；
      c、在插入html 代码时需设置<param name="allowFullScreen" value="true" />；
      d、经多次研究发现，如 html代码设置成<param name="wmode" value="opaque" />或<param name="wmode" value="transparent" />时，则全屏功能无效！也就是说只有flash窗口模块设置为window时，全屏功能才有效（这个算是我的独家发现吧）!

Posted in Flash相关, Tags:flash  js  全屏  

Trackback:

TrackBack URL for this entry:
http://www.klstudio.com/cmd.asp?act=tb&id=104


Comments:

#833 On 2007-1-10 20:14:15 顺子 (e) said,

wmode为opaque或transparent时全屏无效的我也碰到过，当时是因为有个需要浮动在顶层的div被这个需要全屏显示功能的flash挡住了一部分，而div不被flash挡住的解决办法就是wmode设为opaque或transparent，结果矛盾就出来了，要么被挡，要么不能全屏，当时就没管它了，后来想想，如果用JS把div放到顶层显示应该就可以解决这个矛盾了，Kinglong你觉得呢？

#834 On 2007-1-10 22:40:46 kinglong (e) said,

你说得这个解决方法我曾经考虑,但是试过后,发现如果flash的窗口模式设置成"window"的话,那flash就是永远高于div的层数的,也就是说flash总是在div上面的

#852 On 2007-1-15 2:06:35 flash特效网 (e) said,

3Q！
不过代码挺多的。
这个全屏代码是随着显示器的分辨率而定的吗？
我收藏在我网站咯 http://www.9941.cn

#867 On 2007-1-18 12:15:54 顺子 (e) said,

没错，flash的窗口模式设置成"window"的话,flash是高于div的层数的.
不过我看到有个网站（yoqoo.com）上的登陆功能可以实现，大致看了下源码，初步分析应该是用JS来把div放到flash内容层级之上，有空亲自试一下。

#887 On 2007-1-25 11:44:52 deadcat (e) said,

一点全屏。。。firefox2.0 crash了...

#895 On 2007-1-28 2:10:21 wishbecame (e) said,

嘿嘿 老鹰 这个脚本在IE、OPARE里都可以用，在FF里需要点击两次，不过在ns里竟然什么都看不到，包括swf都没现实。不过偶确实葱白你，我正在倒弄一个自动适应屏幕并且外部设置变量的方法，可是竟然不成功。

#899 On 2007-1-28 16:46:05 极度鹤 (e) said,

FLASH全屏, 要的就是这个效果啊. 厉害啊.
学习啊

#904 On 2007-1-30 2:54:07 lizx (e) said,

是否可以考虑AS与JS通讯来实现DIV层更替

#909 On 2007-1-30 21:20:32 极度鹤 (e) said,

楼上的,请问一下.DIV有没有属性什么的来来浮出浏览器及任务栏啊?

#946 On 2007-2-6 11:22:03 kreven (e) said,

非常不错的效果啊!支持

#975 On 2007-2-24 23:17:42 sumnny (e) said,

现在一般用js来屏蔽鼠标右键或者键盘功能
但是当有交互的flash时，网页焦点在flash上
则原有的js功能失效，比如F5按了之后就重新载入了
不知道您有什么好地解决方法呢？

#1015 On 2007-3-6 16:08:33 bluekylin (e) said,

有个细节问题,
全屏按ESC退出时,你怎么把那个按钮设回"全屏效果"?
现在显示是不正确的吧(按ESC退出后还显示着"退出全屏")
你能做到在按ESC的时候自定义事件吗?
好像无效的

#1153 On 2007-3-20 17:46:37 1111 (e) said,

哭啊 ie7下面 over了

#1366 On 2007-4-9 15:45:44 ilovesight (e) said,

这个的效果我看了,player9以上是全屏,9以下的全屏还是在IE里面的,没充满整个屏幕,要实现象9一样的效果还要做哪些补充呢?

#1373 On 2007-4-9 19:54:49 kinglong (e) said,

低于player 9的话,无法做到直正的全屏,只能达到那个效果了!

#1382 On 2007-4-10 11:05:13 ilovesight (e) said,

恩,9的全屏状态下,按ESC的时候自定义事件好象就无效了,不知道是不是9的bug...

#1414 On 2007-4-12 17:12:13 浪子啸天 (e) said,

可以全屏使用,不过有一个问题,原来的输入交互不能使用了啊,点不到文字框里面,怎么处理啊?~~~~~~~

#1533 On 2007-4-26 13:05:49 8088 (e) said,

想请教一下 按了ESC键我想加个事件 可是无效....这个问题可以解决吗？

Stage.addListener( EventListener );
Stage.addListener( xxxx );
EventListener.onFullScreen = function( bFull:Boolean ) {
if ( bFull) {
fun_visib(true);//事件
xxx._x=100;//测试用
} else{
fun_visib(flase);
xxx._x=50;
}
}
这个方法 说是2.0下可以监听 可是测试的时候却没任何效果 就没有执行 不知道为什么？

#1534 On 2007-4-26 14:03:00 8088 (e) said,

呵呵 问题以解决！

有好心的朋友帮忙翻译了说明，大家在用到 Stage["displayState"] = "fullScreen";

时 需要更新自己的类库，这样就可以监听了。

#1803 On 2007-6-8 0:34:56 stoyard (e) said,

这个效果非常棒! 但是全屏后在Flash中的TextInput 组件无法使用,请问有没有方法解决?? 谢谢

#2228 On 2007-8-16 20:59:38 莫愁 (e) said,

博客内容的很不错！以后我会常常来看看！

#2379 On 2007-9-12 15:06:19 hileo (e) said,

非常棒的全屏，我收藏使用啦

#2428 On 2007-9-18 14:41:45 Jubu (e) said,

那有没有什么办法,可是让 网页打开就是全屏,而不是需要点一下.
默认 是全屏???

#2442 On 2007-9-19 11:07:49 kinglong (e) said,

因为flash player功能限制，默认状态下是不能全屏的

#2575 On 2007-10-10 16:54:11 傻孩子 (e) said,

yoqoo.com 现在是http://www.youku.com/，它首页的flash也加了wmode=transparent参数。上面大侠说的用登录窗口，用js弹出div时，页面把flash隐藏了，所以没有遮挡问题。

#2677 On 2007-10-24 18:12:08 皮皮 (e) said,

这个效果在我打了MS最新补丁之后就失去作用了......FIREFOX还直接报错.................

#3513 On 2008-3-14 23:58:09 兄弟 (e) said,

function getPlayerVersion():Number {
var version:String = System.capabilities.version;
if (version) {
version = getVersion();
}
var vers:Array = version.split(" ");
vers = vers[1].split(",");
return Number(vers[0])+Number(vers[1])/100+Number(vers[2])/10000+Number(vers[3])/1000000;
}
这段代码，是错的吧
if (！version) {
version = getVersion();
}

#3514 On 2008-3-15 0:00:44 兄弟 (e) said,

对了，建议楼主，在此文处，写上“此代码工作在ＡＳ２环境下”，因为ＡＳ３，你的代码能不过，如果
if (version) {
version = getVersion();
}中的getVersion();方法，它在ＡＳ３中不能通过…………
费我了好多事，建议用ＳＷＦＯＢＪＥＣＴ与ＡＳ３配合完成版本测试……

#3879 On 2008-4-13 23:06:13 不晴天 (e) said,

在FIREFOX和SAIFAR里不灵啊

#4014 On 2008-4-25 10:36:55 qflash (e) said,

正在做一个FLV的播放器，一般流行的FLV播放器都是双机就自动全屏，但是博主的那个代码，必须得点击那个全屏按钮把。
怎么修改成双机就全屏的呢？

#4358 On 2008-5-27 21:01:38 EricLam (e) said,

请教怎样把"按ESC键退出全屏模式"改成别的文字?

#4709 On 2008-6-26 12:04:24 kinglong (e) said,

这个是无法去除了，因为这是flash player自带的，无法更换。

#4902 On 2008-7-15 10:45:37 雨过天晴 (e) said,

当按全屏按钮时,能否跳转到第二个FLASH而全屏呢?或者是默认就全屏?



Post a comment:(为了防止垃圾留言信息,您的留言需要通过审核才能显示出来)

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。