javascript Flash 播放器的视口调整大小事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10157282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
viewport resize event for flash player
提问by user1333680
I am new to all of this and can't figure out how to resize the flash player I use for my home media server when the window is resized or orientation changes. I am basing the player size on the size of the viewport. I have searched and tried various versions but they don't work which is most likely due to my lack of knowledge. Most of the code below was already done, I have commented what I added here for reference.
我对所有这些都不熟悉，无法弄清楚如何在调整窗口大小或方向改变时调整我用于家庭媒体服务器的 Flash 播放器的大小。我根据视口的大小来确定播放器的大小。我已经搜索并尝试了各种版本，但它们不起作用，这很可能是由于我缺乏知识。下面的大部分代码已经完成，我已经评论了我在这里添加的内容以供参考。
viewport.js(added by me)
viewport.js（由我添加）
var width = $(window).width();
var height = $(window).height();
html
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>
回答by GillesC
Just bind to the windowobject on the resizeand orientationChangeevents and use the JW Playerresizemethod after getting the new width and height.
只需绑定到和事件window上的对象resize并在获取新的宽度和高度后orientationChange使用该JW Playerresize方法。
Something like this.
像这样的东西。
$(window).on('resize orientationChange', function(event) {
var width = $(window).width();
var height = $(window).height();
jwplayer('player').resize(width, height);
});
回答by jameshfisher
Using the DOM API to detect viewport resize:
使用 DOM API 检测视口调整大小：
window.addEventListener('resize', (ev) => {
console.log(window.innerWidth, window.innerHeight);
});
