[解決済み] Video.jsは再生時にフルスクリーンになる
質問
長い間、いろいろと検索してきましたが、私の問題に対する有効な解決策はまだ見つかっていません。私はちょうどビデオプレーヤーがフルスクリーンに入るように見えることはありません。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
は全く存在しない。
これをどのように扱うか、いくつかの選択肢を紹介します。
-
難読化されたメソッド名を使用する。これはお勧めしません。なぜなら、a) マイナーバージョンアップのたびに名前が変わってしまう (たとえば 4.0.5) し、b) あなたのコードが読めなくなってしまうし、c) メソッド名で
cancelFullScreen
. -
最小化されていないvideo.jsのコピーを入手し、自分でホストしてください。(Uglifyやメソッド名を混乱させない他のminifierを使用することができます)。Video.js はこのファイルを提供しないので、git リポジトリをクローンして、ビルド スクリプトを自分で実行する必要があります。また、video.js の CDN を無料で利用できるという利点も得られません。
-
を使用します。 旧バージョン を使用し、4.x がプライムタイムになるまで待ちます。
-
video.jsを一切使用しない。考慮すること jPlayer と jwPlayer または自分でロールバックしてください。
2か3がおすすめです。
アップデートしてください。 この特別な問題は解決されたようです。 修正済み しかし、まだリリースには至っていません。
関連
-
[解決済み】Heroku:ノードアプリで「このアプリにはデフォルトの言語が検出されませんでした」エラーがスローされる
-
[解決済み】node.js TypeError: path must be absolute or specify root to res.sendFile [JSONのパースに失敗しました]。
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み] テキストボックスのEnterキーで、JavaScriptでボタンクリックをトリガーする
-
[解決済み] ユーザーがEnterキーを押してフォームを送信できないようにする
-
[解決済み] jQueryを使用してキーボードのEnterキーを押したことを検出する方法は?
-
[解決済み] YouTube iframe API: HTML 内に既にある iframe プレーヤーを制御するにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】document.getElementByIDは関数ではありません。
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み] テスト
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】React、Uncaught ReferenceError。ReactDOMは定義されていません
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】SyntaxError: JSON の位置 1 に予期しないトークン o があります。
-
[解決済み】XMLパースエラー:ルート要素が見つからない コンソールの場所 FF
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】'useState' が定義されていない no-undef React