1

モバイル デバイスに応答するようにしようとしているユニバーサル ビデオ ラッパーがあります。私がやりたいのは、ビューポートを動的に変更して、ビデオが常にどちらの向きでもその中に収まるようにすることです。これは簡単だと思っていましたが、髪を引っ張っています。風景を切り替えるだけ

基本的に、ビデオの高さと幅はページの上部で構成され、この情報は JW Player に渡され、それに応じて 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 に答える