ここでは、VideojsPlayerを使用し、Tencent Cloud Infinite(CI)の提供する豊富なオーディオビデオ機能と組み合わせて、WebブラウザでCOSビデオファイルを再生する方法についてご説明します。
<!--プレーヤースタイルファイル-->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<!--プレーヤースクリプトファイル-->
<script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
説明:プレーヤーを正式に使用する際は、ご自身で上記の静的リソースをデプロイすることをお勧めします。
プレーヤーを表示したいページ位置にプレーヤーコンテナを追加します。例えば、index.htmlに次のコードを追加します(コンテナIDおよび幅と高さはいずれもカスタマイズできます)。
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
></video>
https://<bucketname-appid>.cos.<region>.myqcloud.com/xxx.<ビデオ形式>
です。説明:
- クロスドメインの問題がある場合は、バケットのクロスドメインアクセスCORS設定を行う必要があります。詳細については、クロスドメインアクセスの設定をご参照ください。
- バケットがプライベート読み取り/書き込みの場合、オブジェクトアドレスには署名が必要です。詳細については、リクエスト署名をご参照ください。
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
>
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
</video>
説明:トランスコードされていないソースビデオは再生の際に互換性の問題が生じる可能性があるため、トランスコード後のビデオで再生を行うことをお勧めします。Cloud Infiniteのオーディオビデオトランスコーディング処理により、さまざまな形式のビデオファイルを取得することができます。
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>
<!-- MP4 -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
<!-- HLS -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
type="application/x-mpegURL"
/>
<!-- FLV -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.flv"
type="video/x-flv"
/>
<!-- DASH -->
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mpd"
type="application/dash+xml"
/>
サンプルコードを取得します。
PM3U8はプライベートM3U8ビデオファイルのことです。COSはプライベートM3U8 TSリソースの取得に用いるダウンロード権限承認APIを提供しています。プライベートM3U8インターフェースをご参照ください。
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600"
type="application/x-mpegURL"
/>
サンプルコードを取得します。
注意:Cloud Infiniteインテリジェントカバー機能により、最適なフレームを抽出してスクリーンキャプチャを生成し、それをカバーにすることでコンテンツの魅力をアップさせます。
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="100%"
height="100%"
data-setup="{}"
poster="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/poster.png"
>
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"
type="video/mp4"
/>
</video>
サンプルコードを取得します。
ビデオコンテンツの安全性を保障し、ビデオの違法なダウンロードと拡散を防止するため、Cloud InfiniteはHLSビデオコンテンツに対する暗号化機能を提供します。この機能はプライベート読み取りファイルよりさらに高いセキュリティレベルを有します。暗号化されたビデオは、アクセス権限のないユーザーの視聴用に配信できなくなります。ビデオがローカルにダウンロードされた場合でも、ビデオ自体が暗号化されているため、悪意ある二次配信が不可能であり、ビデオの著作権が違法に侵害されないよう保障することができます。
操作手順は次のとおりです。
<source
src="https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"
type="application/x-mpegURL"
/>
サンプルコードを取得します。
この記事はお役に立ちましたか?