web-dev-qa-db-ja.com

ビデオをiframe内に配置したときにビデオをフルスクリーンにする方法は？

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内でも問題なくフルスクリーンに最大化します。

htmliframemediaelement.js
18
Jazon

Video.jsでこれに遭遇しました：

モーダルウィンドウ内のvideo.js：全画面が機能しない

そして答えは、これらの属性をiframeに追加することです：<iframe … allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">（IEサポートはありません）

42
Jazon

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

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を拡大できると思いますか？

1
Ab_c

私の顧客はすでにビデオの「フルスクリーン」幅の制限に満足していました-私が取り除く必要があったのは、上下の黒いバーだけでした。 （私の場合、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) */
}

確かに、これはかなり限定的なソリューションであり、背景の色だけでなく、ビデオのサイズ（およびいくつかのビデオのサイズの一貫性）に大きく依存します。しかし、それもあなたのために働くかもしれません。

0
WoodrowShigeru

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

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

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

0
Brad M