移动设备的动态视口始终包含固定尺寸的视频播放器答案

【问题标题】：Dynamic viewport for mobile devices to always contain video player of fixed dimensions移动设备的动态视口始终包含固定尺寸的视频播放器
【发布时间】：2012-07-30 17:26:50
【问题描述】：

我有一个通用的视频包装器，我正在尝试使其能够响应移动设备。我想做的是动态更改视口，以便视频始终可以在其中适应任何方向。我以为这很简单，但我正在拔头发。只是切换风景

基本上，视频的高度和宽度是在页面顶部配置的，并将此信息传递给 JW Player，JW 播放器会相应地制作 Flash 或 HTML5 视频播放器。我还使用此信息，结合客户端宽度和高度来尝试设置视口，以便页面的视频部分始终可以整齐地放入其中，而无需缩放。

我已经在我的 Android Galaxy S II 上进行了几乎所有我想要的设置，但在 iPhone 上看起来仍然一团糟。而且我必须手动设置缩放比例，我知道这并不能帮助我找到通用的解决方案。

这是我目前所掌握的要点：

http://bit.ly/O1afMJ

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, height = device-height" id="mvp" />
<script>                    
            /************ Bunch of player config stuff I've omitted *****************/

                        // These are the width and height of your player. For type "audio", the height is ignored. Default is 480x360. 

            var width = 480;
            var height = 360;
</script>
<script type="text/javascript">

        // Detect whether device supports orientationchange event, otherwise fall back to
        // the resize event.
        var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

        window.addEventListener(orientationEvent, resizeView, false);

        // see if the height or width of the player is greater than the viewport, if so, resize it
        function resizeView() {

                if (document.documentElement.clientWidth < width) {
                        mvp.setAttribute('content', 'width=' + width, + ', height = device-height');
                }

                if (document.documentElement.clientHeight < height) {
                        mvp.setAttribute('content','height=' + height + ', initial-scale=0.6666, maximum-scale=0.6666'); // scale hacks to make this at least do what I want on my Droid, doesn't look nice on iPhone
                }
        };

</script>
</head>
<body>
<h2 id="title">title</h2>
<div id="blurb">blah blah blah</div>
<div role="main">
<div id="mediaspace">
  I'll be replaced by the JW Player
</div>
<script src="http://cdn.cengage.com/js/jwplayer/5.8/jwplayer.js" type="text/javascript">
</script>
<script src="player_mobile.js" type="text/javascript">
</script>
<script type="text/javascript">
        resizeView();
</script>
</body>
</html>

也许 devicePixelRatio 会有所帮助？不确定！

【问题讨论】：

标签： javascript mobile html5-video responsive-design viewport

【解决方案1】：

与其弄乱视口，不如使用http://fitvidsjs.com/？这将根据容器调整视频大小。

希望对你有帮助

【讨论】：