1. ホーム
  2. javascript

[解決済み] Video.jsは再生時にフルスクリーンになる

2022-02-16 08:20:40

質問

長い間、いろいろと検索してきましたが、私の問題に対する有効な解決策はまだ見つかっていません。私はちょうどビデオプレーヤーがフルスクリーンに入るように見えることはありません。APIには多くの例がありますが、どれもうまくいかないようです。

現在作業しているページに含まれているjQueryのバージョンは1.8.2です。また、parallax-1.1.jsとそれが正しく動作するために必要なライブラリを使っているので、それも問題かもしれません。

私が担当しているクライアントは、サイトをレスポンシブデザインにすることを望んでおり、そのために 再生ボタンがクリックされたときに、プレーヤーが直接フルスクリーンになる機能 . この機能は、デスクトップとモバイル/タブレットの両方のブラウザで利用可能である必要があります。動画ページには、3 つの動画プレーヤがあり、それぞれ固有の ID を持ち、共通の CSS クラスも持っている必要があります。

私が試したコードの中には、うまく機能しないものもありました。以下は、ビデオの HTML タグの 1 つを制御する JS コードスニペットの例です。

player1 = _V_('video-1');

player1.on("play",
    function () {
        this.requestFullScreen();
});

player1.on("ended",
    function () {
        this.cancelFullScreen();
});

このコードでは、このようなエラーが発生します。

Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'

Google Chromeの最新版で作業しています。

解決方法を教えてください。

ここで解決しなければならない問題が2つあります。

まず、「play」イベントハンドラの内部でフルスクリーンにすることはできません。セキュリティと優れたユーザーエクスペリエンスのために、ブラウザは「クリック」のようなユーザートリガーとなるイベント内でのみフルスクリーンを起動できるようにしています。すべての Web ページにアクセスするとすぐにフルスクリーンにすることはできませんし、動画を自動的に再生させることもできますが、これはこの規則に違反します。そのため、実際の再生ボタンにある「クリック」ハンドラにこの処理を移す必要があります。

もうひとつは、Video.js 4.0.xの大きな問題で、それは 最小化 でGoogle Closure Compilerを使用しています。 高度な最適化 . そのため、多くのパブリックプロパティやメソッドが難読化され、使用することが困難/不可能になっています。この場合 requestFullScreen は現在 player1.Pa() . そして、私が知る限りでは cancelFullScreen は全く存在しない。

これをどのように扱うか、いくつかの選択肢を紹介します。

  1. 難読化されたメソッド名を使用する。これはお勧めしません。なぜなら、a) マイナーバージョンアップのたびに名前が変わってしまう (たとえば 4.0.5) し、b) あなたのコードが読めなくなってしまうし、c) メソッド名で cancelFullScreen .

  2. 最小化されていないvideo.jsのコピーを入手し、自分でホストしてください。(Uglifyやメソッド名を混乱させない他のminifierを使用することができます)。Video.js はこのファイルを提供しないので、git リポジトリをクローンして、ビルド スクリプトを自分で実行する必要があります。また、video.js の CDN を無料で利用できるという利点も得られません。

  3. を使用します。 旧バージョン を使用し、4.x がプライムタイムになるまで待ちます。

  4. video.jsを一切使用しない。考慮すること jPlayer jwPlayer または自分でロールバックしてください。

2か3がおすすめです。

アップデートしてください。 この特別な問題は解決されたようです。 修正済み しかし、まだリリースには至っていません。