2

このソリューションhttp://daverupert.com/2012/05/making-video-js-fluid-for-rwd/を使用して、videojs プレーヤーを流動的にしています。私の問題は、複数のビデオ (それぞれに一意の ID を持つ) がある場合です。これを機能させる方法がわかりません。

これが私の開発サイトで、3 つのビデオがあります。http://tweedee.e-mediaresources.info/

これが私がプレーヤー用に持っているコードです（上記のDave Rupertのソリューションから）：

    <script type="text/javascript">
    // Once the video is ready
    _V_('#my_video_1').ready(function(){

        var myPlayer = this;    // Store the video object
        var aspectRatio = 9/16; // Make up an aspect ratio

        function resizeVideoJS(){
            // Get the parent element's actual width
            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
            // Set width to fill parent element, Set height
            myPlayer.width(width).height( width * aspectRatio );
        }

        resizeVideoJS(); // Initialize the function
        window.onresize = resizeVideoJS; // Call the function on resize
    });
    </script>

このコードは 1 つの動画に対しては正常に機能しますが、複数の ID を使用するにはどうすればよいですか? 私の開発サイトでわかるように、上記のスクリプトを 3 回 (それぞれ異なる ID で) 複製しただけで、最後のビデオだけが滑らかになります。

4

5 に答える 5

2

毎回 window.onresize() を上書きするので、最後のものだけが使用されます。交換

window.onresize = resizeVideoJS

と ：

 window.addEventListener("resize", resizeVideoJS, false); // all browsers except IE before version 9
于 2013-01-21T18:25:22.390 に答える
2

以下の作品。少し繰り返しが必要ですが、jQuery の遅延オブジェクトreadyのようなものを使用して、すべてのビデオ プレーヤーに対してイベントが発生するまで待機することで回避できると思いますが、サイズ変更メソッドを次のように複製するよりもはるかに優れています。あなたは現在やっています：

<script type="text/javascript">

    var players = ['my_video_1', 'my_video_2', 'my_video_3'];
    var aspectRatio = 9/16;

    // Catch each of the player's ready events and resize them individually
    // jQuery deferred might be a neater way to wait for ready on all components to load and avoid a bit of repetition
    for (var i = 0; i < players.length; i ++) {
        _V_('#' + players[i]).ready(function() {
            resizeVideoJS(this);
        });
    }

    // Loop through all the players and resize them 
    function resizeVideos() {
        for (var i = 0; i < players.length; i ++) {
            var player = _V_('#' + players[i]);
            resizeVideoJS(player);
        }           
    }

    // Resize a single player
    function resizeVideoJS(player){
        // Get the parent element's actual width
        var width = document.getElementById(player.id).parentElement.offsetWidth;
        // Set width to fill parent element, Set height
        player.width(width).height( width * aspectRatio );
    }

    window.onresize = resizeVideos;

</script>
于 2013-01-22T13:13:44.280 に答える
1 
// jQuery deferred might be a neater way to wait for ready 
// on all components to load and avoid a bit of repetition
for (var i = 0; i < players.length; i ++) {
    _V_('#' + players[i]).ready(function() {
        resizeVideoJS(this);
    });
}

// Loop through all the players and resize them 
function resizeVideos() {
    for (var i = 0; i < players.length; i ++) {
        var player = _V_('#' + players[i]);
        resizeVideoJS(player);
    }           
}

// Resize a single player
function resizeVideoJS(player){
    // Get the parent element's actual width
    var width = document.getElementById(player.id).parentElement.offsetWidth;
    // Set width to fill parent element, Set height
    player.width(width).height( width * aspectRatio );
}

window.onresize = resizeVideos;
于 2014-01-16T06:36:57.747 に答える
0

上記のnet.uk.sweetの非常に役立つ回答を、ビデオjsを使用して複数のビデオプレーヤーを処理する作業スクリプトに少し変更しました-これも応答性があります。ここで私の記事 (例も示しています) を見つけることができます = http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html

これには、必要に応じて提供されるコールバック関数も含まれます。

于 2013-06-04T21:07:56.840 に答える