Question

我正在尝试使Flash游戏全屏显示，并且我已经制作了一个使容器div全屏显示的按钮。但是，div中的Flash游戏不会与div一起进入全屏显示，而是会填充到屏幕的左上角。扩展到全屏模式后，如何使Flash游戏跟随div？

我尝试在CSS的.ob部分中使用对象适合的包含和覆盖。

我有一个div：

        <div id="gamebox">
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab    #version=5,0,0,0" >
            <param name=movie value="adrenaline.swf">
            <param name=quality value=high>
            <param name="menu" value="false">
            <embed src="Flash/adrenaline.swf" quality=high menu="false" 
                pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?    P1_Prod_Version=ShockwaveFlash" 
            type="application/x-shockwave-flash" width="550"     height="400"> </embed></object>
        </div>

它将变为全屏，并显示以下代码：

<script type="text/javascript">
      function goFullscreen(id) {
        var element = document.getElementById(id);
        if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
    </script>

使用以下按钮：

 <button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

我的游戏箱具有以下CSS：

#gamebox {
    display: table;
    margin: 0 auto;
    }

但是，当我全屏显示div时，游戏本身仅占据左上角，而不用div填充屏幕。

我当然希望获得全屏体验，但是我只能在屏幕的左上角玩。全屏功能有效，但仅适用于div而不适用于对象。

Answer 1

您必须给父div保留swf内容的一些初始尺寸，例如Flash电影的实际尺寸。现在，在对象和嵌入标签的属性内，将宽度/高度设置为100％。这样可以确保swf始终根据其父级按比例缩放。

<div id="gamebox" style="width:550px;height:400px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
  id="adrenaline" width="100%" height="100%">
  <param name="movie" value="adrenaline.swf">
  <param name="bgcolor" value="#000000">
  <param name="quality" value="high">
  <embed type="application/x-shockwave-flash"
   pluginspage="http://www.macromedia.com/go/getflashplayer"
   width="100%" height="100%"
   name="adrenaline" src="adrenaline.swf"
   bgcolor="#000000" quality="high"
  ></embed>
</object>
</div>
<button onclick="goFullscreen('gamebox'); return false">Fullscreen     Mode</button>

Flash提供了一个额外的属性，用于控制影片的缩放方式：缩放。如果不存在，则使用默认的“ showall” ，以保持影片的纵横比。另一方面，“精确匹配” 会扩展到整个容器。

Answer 2

您的脚本将必须调整width标记上的硬编码height和embed属性。您可以通过以下方式进行此操作：

let embed = document.querySelector("embed");
embed.height = "1vh";
embed.width = "1vw";

全屏显示div时，如何确保其中的对象也全屏显示？

2 个答案: