このライブラリは「Plyr」と呼ばれています。その名の通り、「Player」の略称です。全体的なプレビューは次のとおりです。

公式サイト：https://plyr.io/

GitHub アドレスは次のとおりです: https://github.com/sampotts/plyr

調べてみると、このライブラリは美しくエレガントなだけでなく、機能も非常に豊富であることがわかりました。

それでは、組み込み関数のいくつかを紹介しましょう。

全体概要

まず、どのような機能がサポートされているか見てみましょう。公式デモウェブサイトを開いてビデオを再生し、画像のように効果を確認できます。

全体的に見栄えが良く、ブラウザの内蔵プレーヤーよりもはるかに優れています。すべてのコントロールバーのUIも非常に優れています。

次に、その機能を見てみましょう。

進行状況バーと音量コントロールには入りません。

次に、右側を見てみましょう。まずは字幕コントロールです。

ここをクリックすると字幕をオンまたはオフにできます。つまり、このプレーヤーは字幕ファイルの埋め込みをサポートしています。

また、解像度制御や再生速度制御など、多くの設定もサポートしています。

再生速度コントロールでは、1.25 倍、4 倍など、さまざまなカスタム速度もサポートされます。

また、ピクチャーインピクチャーのビデオ再生もサポートしており、ポップアップボタンをクリックするだけです。

全体的には、公式サイトのデモだけでも、これを選びたくなるには十分です！

詳細な機能

しかし、その機能はそれだけではありません。GitHubのホームページに戻って説明を見てみましょう。次のようになっています。

• 📼   HTMLビデオとオーディオ、YouTubeとVimeo   - 主要なフォーマットをサポート
• 💪  アクセシビリティ - VTT字幕とスクリーンリーダーを完全にサポート
• 🔧  カスタマイズ可能- さまざまなオプションをカスタマイズして、プレーヤーにさまざまな UI を表示できます。
• 😎  クリーンなHTML   - <input type="range"> などの正しい要素を使用します。  音量を制御し、<progress> を使用して進行状況を制御します。
• 📱  レスポンシブ - あらゆる画面サイズに対応
• 💵  お金を稼ぐ- 動画でお金を稼ぐ
• 📹 ストリーミング - hls.js、Shaka、dash.js のストリーミング再生をサポート
• 🎛   API   - 標準化されたAPIを介して再生、音量、検索などを切り替える
• 🎤  イベント- Vimeo や YouTube API を操作する必要はありません。すべてのイベントはクロスフォーマットで標準化されています。
• 🔎  フルスクリーン- ネイティブのフルスクリーン モードをサポートし、「フル ウィンドウ」モードに戻すことができます。
• ⌨️  キーボードショートカット- キーボードショートカットをサポートします
• 🖥  ピクチャーインピクチャー - ピクチャーインピクチャーモードをサポート
• 📱  プレイインライン  - playsinlineプロパティをサポート
• 🏎  スピードコントロール - 瞬時のスピード調整
• 📖  複数の字幕 - 複数の字幕トラックをサポート
• 🌎   i18nサポート - コントロールの国際化をサポートします
• 👌  プレビューサムネイル- プレビューサムネイルの表示をサポートします
• 🤟  フレームワークなし - 「バニラ」ES6 JavaScript で記述されており、jQuery は必要ありません。
• 💁‍♀️  サス  - ビルドプロセスに含まれる

それは信じられないほど強力です！

では、具体的にどのように使うのでしょうか？以下で説明しましょう。

使用

Plyr を使用するには、次の参照を追加して、Plyr の CDN ファイルを直接参照できます。

 < スクリプトsrc = "https://cdn.plyr.io/3.6.12/plyr.js" > < / スクリプト >
 < link rel = "スタイルシート" href = "https://cdn.plyr.io/3.6.12/plyr.css" / >

もちろん、PlyrはNode.jsプロジェクト内での直接参照もサポートしています。インストール手順は以下のとおりです。

 糸を追加するプライヤー

次に、次のように参照します。

 'plyr' からPlyr をインポートします。

 const player = new Plyr ( '#player' );

Plyrには非常に強力な機能があり、ネイティブHTML5メディア関連タグの機能を拡張します。例えば、ビデオタグにカスタム機能を追加できるようになりました。例えば…  データポスター 属性はビデオプレビューのカバーとして使用できます。例えば、以下のように `<track>` タグを追加して字幕ファイルを追加できます。

 < ビデオID = "player" playsinline controls data - poster = "/path/to/poster.jpg" >
 < ソースsrc = "/path/to/video.mp4" タイプ= "video/mp4" / >
 < ソースsrc = "/path/to/video.webm" タイプ= "video/webm" / >

 <!-- キャプションはオプションです -->
 < トラックの種類= "キャプション" ラベル= "英語のキャプション" src = "/path/to/captions.vtt" srclang = "en" デフォルト/>
 < /ビデオ>

Plyr は、YouTube や Vimeo などの外部 Web サイトの埋め込みもサポートしています (一部の中国のビデオ Web サイトもサポートされていれば素晴らしいでしょう)。

YouTube を参照するには、div 要素にいくつかのクラスを追加するだけです。次に例を示します。

 < div クラス= "plyr__video-embed" id = "プレーヤー" >
 < iframe
 src = "https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
 全画面表示を許可する
透明性を許可する
許可= "自動再生"
 <iframe> ​ ​
 < /div>

カスタムスタイル

さらに、Plyr ではカスタム スタイルを追加することもできます。これは、CSS カスタム プロパティを使用することで簡単に実現できます。

たとえば、デフォルトのボタンの色を青から赤に変更したい場合は、CSS スタイルを追加するだけです。

 根{
 -- plyr - 色- メイン： 赤
}

これにより、Plyr は CSS プロパティを読み取り、そのスタイルを制御できるようになります。

その他のカスタム スタイル名については、https://github.com/sampotts/plyr#customizing-the-css を参照してください。

カスタム構成

先ほど述べたように、Plyr ではさまざまなオプションを設定してカスタム機能を実現することができ、次のような非常に包括的な機能があります。*

• 設定: これは、設定を次のように構成するなどの設定の機能を制御できるリストです...   ['キャプション'、'品質'、'速度'、'ループ']  これにより、字幕、解像度、速度、ループ再生などの設定を制御できます。
• i18n: 多言語構成を制御できます。
• blankVideo: ビデオが空の場合にデフォルトで再生されるもの。
• autoplay: 自動的に再生するかどうか。

などなど、他にもたくさんありますので参考にしてください。   https://github.com/sampotts/plyr#options  さらに多くの機能を見てみましょう。簡単に言えば、考えられるほぼすべての機能が含まれています。

JavaScript API

さらに、Play は再生、一時停止、停止、再起動など、再生、一時停止、停止、再起動などを制御できる多くの API を公開しており、AirPlay もサポートされています。

具体的な機能については[ドキュメント/リファレンス]を参照してください。   https://github.com/sampotts/plyr#methods  チェック。

今回は以上です。お役に立てれば幸いです！