0

ページに jPlayer ビデオ コンポーネントがあります。カスタムコントロールは、スタイルを大きくする必要があるため、作成しました。フルスクリーン ボタンでビデオを拡大して、ヘッダーを除くビューポート全体をカバーするようにします。問題は、ビデオが相対的に配置された div 内にあるため、その位置を上、左、絶対に設定すると、この div だけがいっぱいになることです。

構造：

<div id="header"></div><!--This should be visible, even in fullscreen-->
<div id="wrapper"><!--I want the video to fill this wrapper when fullscreen is toggled-->
    <div id="internalContainer"> <!--This is relatively positioned and smaller than the wrapper-->
        <video/><!--This is the video I want to expand-->
    </div>
</div>

現在、「同期」する 2 つのビデオ プレーヤーを使用しており、フルスクリーンをクリックすると別のプレーヤーがトリガーされますが、エレガントではなく、動作させるにはいくつかのハックが必要です。

これを行う良い方法はありますか？ビデオ ノードをデタッチして再アタッチすることはできません。フラッシュ フォールバックを使用しているときに jPlayer が壊れてしまうからです。

4

1 に答える 1

2

トーマスさんには遅刻したかもしれませんが、これが私が同様のシナリオで取り組んだことです。それには2つのステップが必要でした。

ステップ 1: 位置の設定: .jp-video-full クラスに固定。

.jp-video-full { position: fixed; top: 0px; left: 0px; }

ステップ 2: サイズ変更イベントを jplayer コンストラクターに追加して、幅をブラウザー ウィンドウの幅に設定し、全画面表示から復元するときに元に戻します。

$("#jquery_jplayer_1").jPlayer({
    resize: function(){
        if ($("#jp_container_1").is('.jp-video-full')) {
            $('div.jp-video-full').width($(window).width());
        } else {
            $('div.jp-video-360p').width(670);
        }
    }
});
于 2011-11-20T07:36:57.907 に答える