DPlayerを使用したCOSビデオファイルの再生
最終更新日:2024-06-26 10:42:27
概要
ここでは、DPlayerを使用し、Tencent Cloud Infinite(CI)の提供する豊富なオーディオビデオ機能と組み合わせて、WebブラウザでCOSビデオファイルを再生する方法についてご説明します。
統合ガイド
ステップ1：ページにプレーヤースクリプトファイルおよび必要に応じて一部依存ファイルをインポートする
<!--プレーヤースクリプトファイル--><script src="https://cdn.jsdelivr.net/npm/dplayer@1.26.0/dist/DPlayer.min.js"></script>
説明：
プレーヤーを正式に使用する際は、ご自身で上記の静的リソースをデプロイすることをお勧めします。
ステップ2：プレーヤーコンテナノードを設定する
プレーヤーを表示したいページ位置にプレーヤーコンテナを追加します。例えば、index.htmlに次のコードを追加します（コンテナIDおよび幅と高さはいずれもカスタマイズできます）。
<div id="dplayer" style="width: 100%; height: 100%"></div>
ステップ3：ビデオファイルオブジェクトアドレスを取得する
1. バケットの作成を行います。
2. ビデオファイルのアップロードを行います。
3. ビデオファイルのオブジェクトアドレスを取得します。形式は
https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.<ビデオ形式>です。説明：
クロスドメインの問題がある場合は、バケットのクロスドメインアクセスCORS設定を行う必要があります。詳細については、クロスドメインアクセスの設定をご参照ください。
バケットがプライベート読み取り/書き込みの場合、オブジェクトアドレスには署名が必要です。詳細については、リクエスト署名をご参照ください。
ステップ4：プレーヤーを初期化し、COSビデオファイルのオブジェクトアドレスURLを渡す
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COSビデオオブジェクトアドレス},});
機能ガイド
さまざまな形式のビデオファイルを再生する
1. COSバケット上のビデオファイルのオブジェクトアドレスを取得します。
説明：
トランスコードされていないソースビデオは再生の際に互換性の問題が生じる可能性があるため、トランスコード後のビデオで再生を行うことをお勧めします。Cloud Infiniteのオーディオビデオトランスコーディング処理により、さまざまな形式のビデオファイルを取得することができます。
2. さまざまなビデオ形式に対し、マルチブラウザでの互換性を保証するためには、対応する依存関係の導入が必要です。
MP4：他の依存関係を導入する必要はありません。
HLS：ChromeやFirefoxなどの最新ブラウザでH5を介してHLS形式のビデオを再生したい場合は、 tcplayer.min.js の前にhls.min.jsを導入する必要があります。
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js"></script>
FLV：ChromeやFirefoxなどの最新ブラウザでH5を介してFLV形式のビデオを再生したい場合は、 tcplayer.min.js の前にflv.min.jsを導入する必要があります。
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.2/libs/flv.min.1.6.2.js"></script>
DASH：DASHビデオにはdash.all.min.jsファイルのロードが必要です。
<script src="https://cos-video-1258344699.cos.ap-guangzhou.myqcloud.com/lib/dash.all.min.js"></script>
3. プレーヤーを初期化し、オブジェクトアドレスを渡します。
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COSビデオオブジェクトアドレス},});
サンプルコードを取得します。
PM3U8ビデオを再生する
PM3U8はプライベートM3U8ビデオファイルのことです。COSはプライベートM3U8 TSリソースの取得に用いるダウンロード権限承認APIを提供しています。プライベートM3U8インターフェースをご参照ください。
const dp = new DPlayer({container: document.getElementById('dplayer'),// pm3u8の詳細については、関連ドキュメント（https://www.tencentcloud.com/document/product/436/47220）をご参照くださいvideo: {url: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600' // プライベートtsリソースurlのダウンロードクレデンシャルの相対有効期間は3600秒です}});
サンプルコードを取得します。
カバー画像を設定する
1. COSバケット上のカバー画像のオブジェクトアドレスを取得します。
注意：
2. プレーヤーを初期化し、カバー画像を設定します。
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4',pic: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.png',},});
サンプルコードを取得します。
HLS暗号化ビデオを再生する
ビデオコンテンツの安全性を保障し、ビデオの違法なダウンロードと拡散を防止するため、Cloud InfiniteはHLSビデオコンテンツに対する暗号化機能を提供します。この機能はプライベート読み取りファイルよりさらに高いセキュリティレベルを有します。暗号化されたビデオは、アクセス権限のないユーザーの視聴用に配信できなくなります。ビデオがローカルにダウンロードされた場合でも、ビデオ自体が暗号化されているため、悪意ある二次配信が不可能であり、ビデオの著作権が違法に侵害されないよう保障することができます。
操作手順は次のとおりです。
1. HLS暗号化ビデオの再生およびCOSオーディオビデオ実践 | ビデオをロックするのフローを参照し、暗号化ビデオを生成します。
2. プレーヤーを初期化し、ビデオオブジェクトアドレスを渡します。
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8' // 暗号化ビデオアドレス}});
サンプルコードを取得します。
マルチ解像度切り替え
Cloud Infiniteのアダプティブビットレートストリーミング機能は、ビデオファイルをトランスコードおよびパッケージ化し、アダプティブビットレートストリーミング出力ファイルを生成することで、ユーザーがさまざまなネットワーク状態の下でビデオコンテンツをスピーディーに配信できるようサポートするものです。プレーヤーも現在の帯域幅に応じて、最適なビットレートを動的に選択して再生できるようになります。詳細については、COSオーディオビデオ実践 ｜ データワークフローによるマルチ解像度ビデオ再生のサポートをご参照ください。
操作手順は次のとおりです。
1. Cloud Infiniteのアダプティブビットレートストリーミング機能によって、マルチビットレートのアダプティブなHLSまたはDASHターゲットファイルを生成します。
2. プレーヤーを初期化し、ビデオオブジェクトアドレスを渡します。
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8', // マルチビットレートのHLS/DASHビデオ},});
サンプルコードを取得します。
左上隅のロゴ設定
プレーヤーは左上隅へのロゴ設定をサポートしています。
操作手順は次のとおりです。
1. COSバケット上のロゴアイコンのオブジェクトアドレスを取得します。
2. プレーヤーを初期化し、ロゴアイコンを設定します。
const dp = new DPlayer({container: document.getElementById('dplayer'),video: {url: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4',},logo: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.svg'});
サンプルコードを取得します。
フィードバック