Question

我有通用视频包装器，我正在尝试响应移动设备。我想要做的是动态更改视口，以便视频可以始终以任一方向放入其中。我以为这很简单，但是我把头发拉了出来。切换景观

基本上，视频的高度和宽度配置在页面顶部，并且此信息将传递给JW播放器，JW播放器会相应地生成Flash或HTML5视频播放器。我也在使用这个信息，结合客户端的宽度和高度来尝试设置视口，使页面的视频部分始终整齐地适合，而不进行缩放。

我已经在我的Android Galaxy S II上设置了我想要的东西，但它在iPhone上看起来仍然很乱。我必须手动设置缩放比率，我知道这并不能帮助我找到通用的解决方案。

这是我到目前为止的要点：

<!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会有所帮助？不确定！

Answer 1

使用http://fitvidsjs.com/怎么样，而不是搞乱视口呢？这将根据容器调整视频大小。

希望有所帮助

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

1 个答案: