21

mediaelement.js プレーヤーのデフォルト設定を使用しており、初期化は非常に基本的なものです。 $('video').mediaelementplayer();

私の質問は: ビデオが iframe に埋め込まれている場合、プレーヤーを全画面表示にすることは可能ですか? フルスクリーンを押すと、ビデオはiframeに最大化されますが、画面全体にはなりません。これはhtmlの制限ですか、それとも回避する方法はありますか?

一般的な構造は次のようになります。

<!DOCTYPE html>
<html>
  <head />
  <body>
    <iframe>
      <!DOCTYPE html>
      <html>
        <head />
        <body>
          *My Video Here <video> ...*
        <body>
      </html>
    </iframe>
  </body>
</html>

ありがとう!

編集:これはプレーヤー固有のようです。デフォルトの html5<video>実装は、iframe 内であってもフルスクリーンに最大化されます。

4

4 に答える 4

52

video.js でこれに出くわしました:

モーダル ウィンドウ内の video.js: フルスクリーンが機能しない

答えは、これらの属性を iframe に追加することです: <iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"> (ただし、IE はサポートされていません)

于 2013-03-08T14:44:52.253 に答える
1

ビデオがフルスクリーン モードになったかどうかを追跡するために、このコードを使用します。

MediaElementPlayer.prototype.enterFullScreen_org = MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
    // Your code here
    this.enterFullScreen_org();
}
MediaElementPlayer.prototype.exitFullScreen_org = MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
    // Your code here
    this.exitFullScreen_org();
}

親ページでiframeを拡大する関数を呼び出すことができると思いますか?

于 2013-04-12T21:58:34.647 に答える
0

私の顧客は、ビデオの「フルスクリーン」幅が限られていることにすでに満足していました。私が取り除かなければならなかったのは、上下の黒いバーだけでした。(私の場合、iFrame のサイズは 945×1500 でした)。

これは、ほんの少しの CSS で純粋に修正できます。

.mejs-container-fullscreen {
    background-color: #fff !important;
}

.mejs-container-fullscreen .mejs-mediaelement,
.mejs-container-fullscreen video {
    height: 530px !important;
    top: 500px !important;
}

.mejs-container.mejs-container-fullscreen .mejs-controls {
    bottom: auto !important;
    top: 1000px !important; /* video top + video height - controls height (30px) */
}

確かに、これはかなり限定的な解決策であり、ビデオのサイズ (およびいくつかのビデオのサイズの一貫性) と背景色に大きく依存します。しかし、それはあなたにも役立つかもしれません。

于 2015-08-27T12:54:16.213 に答える
0

これは、ページの読み込みを高速化する「ハック」ソリューションです。

1) iFrame の代わりに画像 (通常はビデオのスクリーンショット) を作成します。

2) クリック イベント ハンドラーを画像にバインドして、必要なサイズの iFrame を作成します。(これらの寸法は、クライアントのウィンドウ サイズに基づくことができます)。

于 2013-03-07T16:53:05.247 に答える