1

我有一个通用的视频包装器，我试图让它响应移动设备。我想做的是动态改变视口，这样视频就可以在任何方向上总是适合它。我以为这很简单，但我正在拔头发。只换风景

基本上，视频的高度和宽度是在页面顶部配置的，并将此信息传递给 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 会有所帮助？不确定！

4

1 回答 1

1

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

希望有帮助

于 2012-07-31T10:07:54.590 回答