Brightcove Playerサンプル：

プレーヤーの例

このサンプルでは、ビデオを再生するためのパスワードを入力する必要があります。パスワードを入力したら、[ サインイン] ボタンをクリックするか、 Enter キーを押します。テストの場合、パスワードはですthepass。間違ったパスワードを入力すると、JavaScript 警告ボックスがポップアップし、適切なメッセージが表示されます。

ペンを見るビデオを表示するためのパスワード Brightcove Learning Services（ @ rcrooks1969） オンCodePen。

ソースコード

GitHubで完全なソリューションを表示します。

軽いセキュリティ

このドキュメントには、ビデオを見るための軽いセキュリティを提供する 2 つの異なるアプローチのコードが含まれています。これらの実装のいずれも、動画を再生したくない視聴者から動画を保護する防弾的な方法ではありません。 彼らは正しいパスワードを見つけるためにいくつかの知識と労力を要する小さな障壁を提供します。動画を保護するために完全に安全な方法が必要な場合は、概要をご覧ください。コンテンツ保護と概要：Video Cloud ドキュメントのデジタル著作権管理 (DRM) を使用して、作業を開始できます。この文書の次の 2 つのセクションでは、2 つのアプローチについて詳しく説明します。

動画のカスタムフィールドにパスワードを保存する

このアプローチでは、パスワードカスタムフィールドがビデオから読み込まれ、プレーヤーをオーバーレイするフォームに入力されたパスワードと照合されます。カスタムフィールドの作成の詳細については、「カスタムメタデータフィールドの作成」ドキュメントを参照してください。

このアプローチの主な利点は次のとおりです。

• すべてのビデオは異なるパスワードを持つことができます。
• カスタムフィールドにパスワードが入力されていない場合、ビデオの視聴者はパスワードの入力を求められません。

主な欠点は次のとおりです。

• ビデオ設定にカスタムフィールドを追加する必要があります（ワンタイムアクト）。
• 視聴を制限する動画ごとに、パスワードを入力する必要があります。

このバージョンのプラグインのコードはこの文書で詳しく説明し、プラグインのバージョンはここにあります。

プラグインに資格情報を渡す

ここでは、実装ロジックは、カスタムプラグインに配置され、次のスクリーンショットに示すように、プラグインが関連付けられているプレーヤーで見たすべてのビデオのパスワードは、オプションとして渡されます。

このアプローチの主な利点は次のとおりです。

• 1 つのパスワードは、プラグインがロードされたプレーヤーで閲覧されたすべての動画について、有効な資格情報として機能します。

主な欠点は次のとおりです。

• 異なるパスワードを使用するには、異なるプレーヤーを使用する必要があります。
• プレーヤーで視聴されるすべてのビデオについて、ビデオを再生するには、パスワードを入力する必要があります。

このバージョンのプラグインのコードは、このドキュメントで詳述されているコードに非常に密接に続き (実際には少しシンプルです)、プラグインのバージョンはここにあります。

API/プラグインリソースを使用

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

このサンプル用に作成した Brightcove Player には、特別な設定は必要ありません。

その他のHTML

他の HTML 要素はページに追加されません。

アプリケーションフロー

このアプリケーションの背後にある基本的なロジックは次のとおりです。

• passwordカスタムフィールドにパスワードがあるかどうかを確認します。はい、モーダルダイアログをポップアップし、そうでない場合は、ビデオを再生します。
• ModalDialogで、ユーザーがパスワードを入力するためのフォームを表示します。
• パスワードを入力し、[ サインイン ] ボタンをクリックするか Enter キーを押した後、入力したパスワードとビデオのメタデータに保存されているパスワードを確認します。
• 正しいパスワードが入力されている場合は、ビデオを再生します。そうでない場合は、適切なメッセージを含む警告ボックスをポップアップします。

必要に応じてModalDialogを表示

ラベルが付いたコードを見つけます。

// ### Display ModalDialog if password in video's custom field ###

loadstartmediainfoオブジェクトが読み取れるようにイベントが送出されるのを待った後、パスワードを受け取り、未定義であるかどうかをチェックします。はいの場合は、ビデオを再生し、それ以外の場合は、パスワードフォームを含むModalDialogを表示します。uncloseableこのオプションは、ユーザーがESCキーを押してビデオを再生するだけではないように追加されます。

イベントリスナーを使用してパスワードチェックを設定する

ラベルが付いたコードを見つけます。

// ### Add event listeners to check password ###

2 つのイベントリスナーが設定され、1 つはユーザーがボタンをクリックした場合、もう 1 つはユーザーが Enter キーを押した場合です。動的に作成されたフォームがに配置されるとnewElement、そのフォームは DOM で使用できます。したがって、JavaScript querySelector()のメソッドを使用して、要素へのハンドルを取得し、イベントハンドラを割り当てることができます。

パスワードが正しいかどうかを確認する

ラベルが付いたコードを見つけます。

// ### Check entered password against saved password and act accordingly ###

パスワード入力要素のを取得したら、ビデオのカスタムフィールドのパスワードと比較できます。value その後、ビデオまたはポップアップを再生し、パスワードが一致しなかったことを示す警告を再生します。

アプリケーションのスタイリング

プレイヤーのサイズとフォームの外観を制御するためのCSSの量が少量あります。

プラグインコード

通常、JavaScript を Brightcove Player プラグインに変換する場合は、公称の変更が必要です。必要な変更の 1 つは、ready()メソッドの標準使用をプラグインを定義するコードに置き換えることです。

ここでは、プレーヤーで動作するJavaScriptコードへの非常に一般的に使用されるスタートです：

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
});   

最初の行を変更して、標準の構文を使用して Brightcove Player プラグインを起動します。

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});   

前述のように、このドキュメントの対応する GitHub レポ: password-to-view.js には、プラグインの JavaScript コードが表示されます。

プレーヤーでプラグインを使用する

プラグインの CSS ファイルと JavaScript ファイルをインターネットでアクセス可能な場所に保存したら、プレーヤーでプラグインを使用できます。Studio の PLAYERSモジュールでは、プレーヤーを選択し、[ プラグイン ] セクションで CSS ファイルと JavaScript ファイルに URL を追加し、名前を追加することもできます。オプションが必要な場合は、[Options] と [Options]