7

ブートストラップを使用して開発されたレスポンシブ レイアウト Web サイト用のビデオ プレーヤーが必要です。つまり、画面のサイズを変更したり、さまざまなサイズの画面でページを表示したりすると、プレーヤーは自動的に画面に収まるはずです。

jwplayer と flowplayer を試してみましたが、うまくいきませんでした。

http://www.longtailvideo.com/support/forums/jw-player/setup-issues-and-embedding/24635/responsive-video-internet-explorer-100-widthheight

注:プレーヤーはYouTubeビデオを再生できる必要があります....

jwplayer/flowplayerをレスポンシブにする方法はありますか?

4

7 に答える 7

6

ルカの答えのより良いバージョン:

$(window).resize(function() {
    var $width = $("#holder").width();
    var $height = $width/1.5;
    jwplayer().resize($width,$height);
});

JW Player APIのサイズ変更機能を使用します。

http://www.longtailvideo.com/support/jw-player/29411/resizing-the-player

別の解決策

レスポンシブ デザイン サポートのドキュメントを確認してください: http://www.longtailvideo.com/support/jw-player/32427/responsive-design-support

<div id="myElement"></div>
<script>
    jwplayer("myElement").setup({
        file: "/uploads/myVideo.mp4",
        image: "/uploads/myPoster.jpg",
        width: "100%",
        aspectratio: "12:5" // Set your image ratio here
    });
</script>
于 2013-10-26T11:31:59.467 に答える
2

シンプルなcssスタイルで変更できます

/* Video small screen */
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}

.video iframe,  
.video object,  
.video embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
于 2012-12-22T05:21:39.063 に答える
1

サイズ変更にjQueryを使用しています。#holderムービーが配置されるdivです(#videocontainer)。
構造:

<div id="holder">
    <div id="videocontainer"></div>
</div>

サイズがかかり#holder、に渡します#videocontainer。それはie9、ie8、..で動作します

$(window).resize(function() {
    var $width = $("#holder").width();
    var $height = $width/1.5;
    jwplayer("videocontainer").setup({  
    flashplayer: "jwplayer/player.swf",
    file: "###.mp4",                            
    width: $width,
    height: $height,
    image: "###.jpg"
    });
});

それが役に立てば幸い!

于 2012-10-02T22:40:42.067 に答える
0

最も簡単な方法は、javascript を使用することです

 function sizing() {
        $('#player').css('width', $('#container').outerWidth());
        $('#player').css('height',$('#player').outerWidth() / 1.33);
    }

    $(document).ready(sizing);
    $(window).resize(sizing);

jquery ライブラリをインクルードし、アスペクト比を変更することを忘れないでください (1.33 は 4:3 用、1.77 は 16:9 用です)。

于 2013-05-29T12:57:43.600 に答える
0

これは私にとってはうまくいきます JWプレーヤーはここに行きます

<script type="text/javascript">

                            if($( window ).width() <= 400){
                                 pl_width = 300;
                                 pl_heith = 150;
                            }else if($( window ).width() <= 600){
                                 pl_width = 500;
                                 pl_heith = 250;
                            }else{
                                pl_width = 700;
                                pl_heith = 350;
                            }
                            //alert(pl_width);
                            jwplayer("video_top").setup({

                                flashplayer: "<?php echo $player_path; ?>",

                                file: "<?php echo $your_file; ?>",
                                controlbar: "bottom",

                                height:pl_heith,

                                width:pl_width


                            });
于 2017-09-19T11:06:48.070 に答える
-1

サイトで YouTube 動画を使用し、FitVid.Jsプラグインを使用してサイトをレスポンシブにすることができます。

于 2012-09-17T14:17:13.750 に答える