Question

我是所有这一切的新手，无法弄清楚当调整窗口大小或方向发生变化时如何调整我用于家庭媒体服务器的Flash播放器的大小。我将播放器大小基于视口的大小。我搜索并尝试了各种版本，但它们不起作用，这很可能是由于我缺乏知识。下面的大部分代码已经完成，我已经评论了我在这里添加的内容以供参考。

Link to a sample

viewport.js （由我添加）

var width = $(window).width();
var height = $(window).height();

HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Gizmo play_flash</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
 <script type="text/javascript" src="scripts/jwplayer.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="scripts/viewport.js"></script>
<noscript><meta http-equiv="refresh" content="2; URL=noscript.html"></noscript>
</head>

<body style="margin: 0; padding: 0; background-color: #000000">
<div id="outer">

    <div class="player_wrapper" style="width: 100%; height: 100%; margin:0px auto;">
        <div id="player">
            Loading the video player ...
        </div>
    </div>

    <script type="text/javascript">
        jwplayer('player').setup({
            'flashplayer': 'scripts/player.swf',
            'file': '[File.FlashLink]',
            'autostart': 'true',
            'duration': '[File.Duration]',
            'provider': 'scripts/jrmediaprovider.swf',
            'skin': 'scripts/glow.zip',
                    <!--begin mod-->
            'width': width - 5,
            'height': height - 5
                    <!--endmod-->
        });

        jwplayer('player').onComplete(
            function(event) { 
                try {
                    window.Gizmo.onComplete();
                } catch (err) { }
            }
        );
    </script>
</div>
</body>
</html>

Answer 1

只需绑定window和resize事件上的orientationChange对象，然后在获取新的宽度和高度后使用JW Player resize方法。< / p>

像这样。

$(window).on('resize orientationChange', function(event) {
    var width = $(window).width();
    var height = $(window).height();
    jwplayer('player').resize(width, height);
});

Answer 2

使用DOM API检测视口大小调整：

window.addEventListener('resize', (ev) => {
  console.log(window.innerWidth, window.innerHeight);
});

视频调整Flash播放器的事件

2 个答案: