はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart7です。
Video.jsの公式のガイドであるVideo.js Guidesを翻訳ツールを使いながら解説していきます。
前回はPlayer作成時に渡すオプションでVideo.js特有のオプション一覧を紹介しました。今回はVideo.jsの公式で発表しているFAQ一覧を紹介します。
前回
Video.js完全マニュアル part6 〜Video.js特有のオプション〜
part1から読む人はこちら
この記事の対象者
- Video.jsを利用する人
- 動画プレイヤーのUI操作をしたい人
- 動画再生関連のサービスを作りたい人
この記事の解説する章
公式FAQ集
Q：Video.jsとは何ですか？
Answer
Video.js は、ネイティブの video 要素を中心とした拡張可能なフレームワーク/ライブラリです。
以下のような機能を持っています。
- プラグインAPIを提供し、異なるタイプのビデオをネイティブのビデオ要素に渡すことができます（例：HLS、HTML5ビデオ、その他）
- ブラウザ間でネイティブビデオAPIを統一（必要に応じて機能をポリフィリングでサポート）
- 拡張性、テーマ性のあるUIを提供
- キーボードやスクリーンリーダーを使用するユーザーのためのアクセシビリティを確保します
- 追加のビデオフォーマットに対応するコアプラグインのセットを備えています
- HLSとDASHはネイティブでサポートされています。
- videojs-contrib-dashは、より完全な DASH サポートのために使用することができます
- コアプラグインでDRMビデオに対応
- 多くのプラグインがあらゆる機能をサポートするため、拡張性があります。videojs.comのプラグインリストを参照してください。
Q: Video.jsをインストールするにはどうすればよいですか？
Answer
現在、Video.jsはnpm、GitHubタグからのリリースファイル、またはCDNでホストされたバージョンを使用してインストールすることができます。これらの方法については、セットアップガイドを参照してください。
Q: Video.jsはbowerにありますか？
Answer
Video.js 6 以前のバージョンでは bower をサポートしていましたが、Video.js 6 以降は bower の公式サポートは終了しています。詳しくは issue #4012 を参照してください。
Q: Video.jsのバージョン番号の意味は何ですか？
Answer
Video.jsはsemverに従っており、大きなバージョンアップがない限り、ユーザーの下からAPIが変わることはないはずです。
Q：再生に関するトラブルシューティングはどうすればよいのでしょうか？
Answer
トラブルシューティングガイドをご覧ください。トラブルシューティングで解決しない場合は、Slackで質問するか、issueを送信してください。
再生に関する問題について助けを求める場合、問題は多くの場合、使用されているビデオファイル、ビデオのホスト方法、またはブラウザに固有であるため、それらのすべての情報と縮小したテストケースを含めるようにしてください。
Q: 特定のブラウザでビデオが再生されません。なぜですか？
Answer
トラブルシューティングガイドをご覧ください。トラブルシューティングで解決しない場合は、Slackで質問するか、issueを送信してください。
Q: なぜ再生前にビデオ全体がダウンロードされるのですか？なぜビデオの読み込みに時間がかかるのですか？
Answer
トラブルシューティングガイドをご覧ください。トラブルシューティングで解決しない場合は、Slackで質問するか、issueを送信してください。
Q: vdata12345に言及したエラーがスローされるのを見ました。これは何ですか？
Answer
トラブルシューティングガイドをご覧ください。トラブルシューティングで解決しない場合は、Slackで質問するか、issueを送信してください。
Q: Video.jsのバグを見つけました、または機能を追加したいです。どうしたらよいでしょうか？
Answer
自身で問題を解決できる、あるいは機能を追加できる場合
Video.js リポジトリへのプルリクエストは非常に歓迎されるでしょう。コントリビューションガイドとプルリクエストテンプレートに必ず従ってください。
自身で問題の解決や機能の追加ができない場合
Video.js リポジトリにissueを作成します。あなたのissueをより良くサポートできるよう、issueのテンプレートとissueガイドに従っていることを確認してください。
Q：縮小テストケースとは何ですか？
Answer
縮小テストケースとは、直面している問題を単独で再現した例です。可能な限り少ないコードで問題を再現するサンプルページとお考えください。
縮小されたケースを追加することは重要です。問題が明白に思える場合でも、他の人にとってはそうではないかもしれません。参照できる例があることで、誰かが見てすぐに何が問題なのか分かる場合と、あなたが説明していると思われることを再現するのに時間がかかる場合の違いが出てくるのです。
私たちは、テストケースの削減のためのスターター例を用意しています。縮小テストケースについてもっと知りたい方は、css-tricksをご覧ください。
Q: Video.jsはどのようなメディアフォーマットに対応していますか？
Answer
これは、ブラウザの HTML5 video 要素がサポートする形式と、Video.js が利用できる再生技術/プラグインに依存します。メディア形式の詳細については、トラブルシューティングガイドを参照してください。
Q: Video.jsはどのように使用するソースを選択するのですか？
Answer
ソースの配列が利用可能な場合、Video.jsは与えられた順序で各ソースをテストします。各ソースについて、techOrderの各技術が、直接かソースハンドラ（videojs-http-streamingなど）経由で再生可能かどうかをチェックします。最初にマッチしたものが選ばれます。
Q: ビデオを自動再生するにはどうしたらいいですか？
Answer
近の自動再生の動作の変化に伴い、video 要素に autoplay 属性を使用することは推奨されなくなりました。Video.js ではまだサポートされていますが、Chrome を含む多くのブラウザで、autoplay 属性の動作が変更されつつあります。
代わりに、autoplay 属性ではなく autoplay オプションの使用を推奨します。使用に関する詳細は、Video.js オプション ガイドの autoplay オプションをご覧ください。
autoplay の変更に関する詳細については、当社のブログ記事を参照してください。
Q: モバイル端末でビデオを自動再生するにはどうすればよいですか？
Answer
ほとんどのモバイル端末では、最近まで動画の自動再生がブロックされていました。自動再生に対応していないモバイル機器では、Video.js で自動再生がサポートされていません。iOS10 や Chrome for Android 53+ など、自動再生をサポートしているデバイスでは、動画をミュートするか、オーディオ トラックのない動画でなければ再生できません。
video 要素の属性を使用して手動でこれを行うことはお勧めしません。代わりに、自動再生オプションに 'any' または 'muted' という値を渡す必要があります。このオプションの使用に関する詳細は、autoplay オプションを参照してください。
注意: 現時点では、autoplay 属性とオプションは、動画の自動再生を保証するものではありません。
Q: Video.js で RTMP ビデオを再生するにはどうすればよいですか？
Answer
RTMPの再生にはFlashが必要であり、Flashの寿命が尽きたため、再生できなくなりました。対応しているブラウザはありません。
Q: ビデオ/字幕/オーディオ/トラックへのリンクを隠すにはどうすればよいですか？
Answer
ブラウザが行うネットワーク リクエストを隠すことは不可能であり、ソース内の URL を十分に難読化することも困難です。トークン認証のような技術は役に立つかもしれませんが、Video.js の範囲外です。
高度に安全でなければならないコンテンツのために、videojs-contrib-eme は DRM サポートを追加します。
Q: Video.jsのロギングをオフにすることはできますか？
Answer
出来ます。Video.js読み込んだ後、プレーヤーを作成する前に、以下のコードを追加することで実現可能です。
videojs.log.level('off');
どのレベルのロギングが可能かなどの詳細については、デバッグガイドを参照してください。
Q：プラグインとは何ですか？
Answer
プラグインとは、他の人が再利用できる機能をまとめたものです。
例えば、Video.jsにボタンを追加して、動画を10回連続で再生した後に再生を停止させるようなプラグインがあります。
このようなプラグインが存在し、公開されていれば、ユーザーは自分のページにそのプラグインを入れて、機能を共有することができます。
Q：Video.jsのプラグインを作るにはどうしたらいいですか？
Answer
Video.jsのプラグイン作成については、プラグインガイドをご覧ください。
Q: Video.jsにボタンを追加するにはどうすればよいですか？
Answer
Video.jsにボタンを追加する例については、コンポーネントガイドを参照してください。
Q: Video.jsのプラグイン一覧はどこで見ることができますか？
Answer
videojs-pluginキーワードでnpmに公開されているプラグインの一覧は、videojs.comで管理されています。
Q: ウェブサイトにプラグインを掲載するにはどうすればよいですか？
Answer
package.json の配列に 'videojs-plugin' キーワードを追加し、npm にパッケージを公開します。
プラグインジェネレータを使用する場合、これは自動的に行われます。詳しくは、プラグインガイドをご覧ください。
Q: Video.jsのスキンの一覧はどこで見ることができますか？
Answer
Video.js の GitHub wiki を参照してください。
Q：Video.jsは音声のみのプレーヤーとして動作しますか？
Answer
はい。<video>タグや<audio>タグ内の音声のみのファイルを再生するのに使用できます。
Q: Video.jsはオーディオトラックに対応していますか？
Answer
はい。オーディオトラックの使用方法については、オーディオトラックのガイドを参照してください。
Q: Video.jsはビデオトラックに対応していますか？
Answer
代替のビデオトラックのサポートは現在開発中です。ビデオトラックの使用に関する詳細については、ビデオトラックガイドを参照してください。
Q: Video.jsは、テキストトラック（キャプション、字幕など）に対応していますか？
Answer
はい、そうです。テキストトラックの使用方法については、テキストトラックガイドをご覧ください。
Q: Video.jsは、HLS（HTTP Live streaming）ビデオに対応していますか？
Answer
Video.jsはHLSに対応しています。HTML5 要素が HLS をサポートしている場合、ネイティブ サポートを使用して再生されます（例：Safari、iOS、レガシー Edge、Android 向け Chrome）。その他のブラウザでは、当社の再生エンジンである videojs-http-streaming を使用して再生されます。
HLS の非ネイティブ再生では、動画をホストするサーバーが CORS ヘッダーを設定することが不可欠であることに留意してください。
Q: Video.jsはMPEG DASHビデオに対応していますか？
Answer
Video.js は、再生エンジンである videojs-http-streaming で一部の DASH ストリームをサポートしています。
また、videojs-contrib-dash パッケージを使用することもできます。
HLS と同様に、DASH ストリームには CORS ヘッダーが必要です。
Q：Video.jsはライブビデオに対応していますか？
Answer
しています。ライブ用の一般的なフォーマットは、HLSまたはDASHです。
以前はRTMPがライブによく使われていましたが、どのブラウザでも再生できるわけではなくなりました。
Q: Video.jsでYouTubeの動画を再生することはできますか？
Answer
サポートを追加する公式プラグイン、videojs-youtubeがあります。
Q: Video.jsはVimeoのビデオを再生できますか？
Answer
サポートを追加する公式プラグインとして、videojs-vimeoがあります。
Q: Video.jsはDRMビデオに対応していますか？
Answer
サポートを追加する公式プラグイン、videojs-contrib-emeがあります。
Q: Video.jsは、広告の統合に対応していますか？
Answer
コア広告のサポート、videojs-contrib-adsを追加する公式プラグインがあります。広告サーバーとの通信と広告の表示を処理するこれ以上のプラグインは、例えば、GoogleのIMAプラグインを構築するなど.
Q：Video.jsはnode.jsは必要ですか？
Answer
必要です。Video.jsはNPMで公開されています。
Q: Video.jsはwebpackで動きますか？
Answer
動きます。Webpack と Video.js の設定ガイドを参照してください。
Q: Video.jsはReactで動きますか？
Answer
動きます。React と Video.js の設定ガイドを参照してください。
Q：再生ボタンを中央に配置することは可能ですか？
Answer
デフォルトのスキンは、ポスター画像が見えなくならないようにボタンをオフセットしますが、vjs-big-play-centeredクラスをプレーヤーに追加するだけで、中央に配置されるようになります。
Q：一時停止中に大きな再生ボタンを表示させることはできますか？
Answer
一時停止時にボタンを表示するために、プレーヤーにvjs-show-big-play-button-on-pauseクラスを追加します。
Q: Firefoxでピクチャーインピクチャーボタンが表示されないのはなぜですか？
Answer
Firefox は HTML video Picture-in-Picture (PIP) API をサポートしていないため、Video.jsの動作ででカスタムボタンを持つことはできません。
Firefox には、独自のオーバーレイ PIP ボタンと、それを表示するかどうかの独自のロジックがあります。
最後に
今回は公式で紹介しているFAQ集を紹介しました。
今回はほとんどDeepLで翻訳したものをそのまま載せています。
Twitterもやってます