7

タグ内で jPlayer のフルスクリーンを機能させることはできますIFRAMEか? そのままでは、「全画面表示」は iframe のサイズによって制限されます。

編集：

jPlayer を に挿入する方法は次のIFRAMEとおりです。

<div id="movieContainer" >
  <object id="videoTut" name="videoTut" type="text/html" data="/videotutorial/videotut.html">
  </object>
</div>

jPlayervideotut.htmlを含む完全な HTML ページが含まれており、個別にロードされた場合に機能します。そして、objectタグは のようなコードを使用して変更されますdocument.getElementById('movieContainer').innerHTML = '...。

参照: https://groups.google.com/forum/#!topic/jplayer/IQxIIYhtAnE

(追記: jPlayer の複数ビデオの設計について私を助けたい場合は、ここで行ってください: jPlayer マルチビデオ デモ コード? )

4

4 に答える 4

5

これをiframeに入れます

<iframe /* your iframe code */ webkitAllowFullScreen="true" mozallowfullscreen="true" allowFullScreen="true"></iframe>

これをjsファイルに追加します

$("a.jp-full-screen").on('click', function() {
    var docm, rqst;

    docm = document.documentElement;
    rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});
$("a.jp-restore-screen").on('click', function() {
    var docm, rqst;

    docm = document;
    rqst = docm.cancelFullScreen|| docm.webkitCancelFullScreen || docm.mozCancelFullScreen || docm.msCancelFullScreen || docm.exitFullscreen;
    if(typeof rqst!="undefined" && rqst){
        rqst.call(docm);
    }
});

これがフラッシュソリューションで機能するかどうかはわかりません

于 2013-03-10T15:01:29.190 に答える
2

ええと、iframeはそれに割り当てられた寸法より大きくすることはできません。それが基本です。したがって、iframe自体が画面の高さと幅の100％を占めない限り、いいえ、「フルスクリーン」サイズで映画を再生できるとは思いません。同様に、割り当てられたサイズよりも大きいサイズでオブジェクトを再生することはできません。画面全体を制御できる場合は、メディアをアクティブ化または非アクティブ化するときに、iframeの高さと幅、およびその中に含まれるオブジェクトのサイズを動的に変更できます。ただし、滑りやすい坂道になる可能性があるので注意してください。ブラウザ間で一貫性のない動作が見られる場合があり、ブラウザ固有のレイアウトの問題のトラブルシューティングに時間を費やす必要があります。

とはいえ...jPlayerがhtml5ではなくFlashを使用して映画を再生している場合は、「allowfullscreen」属性をiframeに追加できます。これにより、映画をiframeサイズ外で再生できるようになります。ただし、FlashはjPlayerのフォールバックであるため、形式を指定できるかどうかを確認する必要があります。そうでない場合は、jPlayerを使用するのではなく、swfobject.jsを使用してFlashムービーをロードすることをお勧めします。繰り返しになりますが、ブラウザとの不整合が発生する可能性があるため、そのための時間を確保する必要があります。

于 2012-05-25T21:34:10.487 に答える
0

私にとっては、以下のコードが機能しました

$(".jp-full-screen").on('click', function () {
        var docm, rqst;

        docm = document;
        rqst = docm.requestFullScreen || docm.webkitRequestFullScreen || docm.mozRequestFullScreen || docm.msRequestFullScreen;

        if (typeof rqst != "undefined" && rqst) {
            rqst.call(docm);
        }
    });

ボタンをクリックするとフルスクリーンがアクティブになり、ボタンを再度クリックすると無効になります

<button class="jp-full-screen" role="button" tabindex="0">full screen</button>

webkitAllowFullScreen mozallowfullscreen allowFullScreen が iframe に追加されていることを確認してください。

于 2015-03-09T06:39:35.317 に答える
-1

jplayer の APIを調べたところ、iframe ページ内でもjplayerのサイズをフルスクリーンに設定できるようです。

彼らのドキュメントでは、読み込み中のiframe ページでSet Fullsize Optionを使用する方法について説明しています。

Set Fullsize Option リンクをたどると、オプションが表示されます。そのうち、関心のある 3 つのデフォルト値のうちの 2つがここに示されています。

width
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The width as a CSS rule.
height
    String : (Default: [Video:"100%"] [Audio:"0px"]) : The height as a CSS rule.

このページの jPlayer's Development Tester のおかげで、そのオプションを設定する実際の例を簡単に表示できます。

試してみる手順は次のとおりです。

1.ページの上部にあるsolution: というタイトルの青いリンクをクリックします。2.タイトル行の最初の項目までスクロールし、それをクリックします。3.最後に、下にスクロールしてフルスクリーン サイズを設定します。"html, flash"
setMedia(A:{m4v})
sizeFull360p

下の作成された jplayer で[再生] をクリックします。その後、プレイ中にフルスクリーン ボタンをクリックすると、jplayerが360pで定義された最大サイズに拡大されます。

iframe ページの要件では、iframe コンテナーの 100% であるため、最大サイズは既定の設定ではありません。

代わりに、JavaScript を使用してクライアントの画面の幅と高さのサイズを指定し、iframe ページの外側で全画面表示にします。例：

screen.height;
screen.width;

確かに、ビデオの幅と高さの値は、示されているパーセンテージまたはピクセル単位で指定できます。次に、上記の例に示すように、次の文字列を引用符で囲みます。

[Video: "'" + screen.height + "px" + "'"]
[Video: "'" + screen.width + "px" + "'"]

iframe が同じドメインにない場合、上記は機能しない可能性がありますが、それは問題ではないことがわかります。

于 2012-05-27T11:29:05.313 に答える