ここでは、オーディオビデオ端末SDK(Tencent Cloud View Cube)を統合したTCPlayerを使用し、Tencent Cloud Infinite(CI)の提供する豊富なオーディオビデオ機能と組み合わせて、WebブラウザでCOSビデオファイルを再生する方法についてご説明します。
<!--プレーヤースタイルファイル-->
<link href="https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.min.css" rel="stylesheet">
<!--プレーヤースクリプトファイル-->
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v4.5.0/tcplayer.v4.5.0.min.js"></script>
説明:
- Player SDKを正式に使用する際は、上記の関連静的リソースをご自身でデプロイすることをお勧めします。クリックしてプレーヤーリソースをダウンロードします。
- デプロイし解凍した後のフォルダについては、リソースの相互引用の異常を回避するため、フォルダ内のディレクトリを調整することができません。
プレーヤーを表示したいページ位置にプレーヤーコンテナを追加します。例えば、index.htmlに次のコードを追加します(コンテナIDおよび幅と高さはいずれもカスタマイズできます)。
<video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
</video>
説明:
- プレーヤーコンテナは
<video>
タグである必要があります。- 例中の
player-container-id
はプレーヤーコンテナのIDであり、自身で設定することができます。- プレーヤーコンテナ領域のサイズについては、CSSを介して設定することをお勧めします。CSS設定はプロパティ設定よりもフレキシブルで、フルスクリーンやコンテナ適応などの効果を実現することができます。
- 例中の
preload
属性はページのロード後にビデオをロードするかどうかを指定します。通常、ビデオ再生を高速化するため、auto
に設定しますが、その他のオプション値には、meta
(ページロード後にメタデータのみをロード),none
(ページロード後にビデオをロードしない)があります。モバイル端末ではシステムの制限のために自動的にビデオをロードすることができません。playsinline
やwebkit-playsinline
といったいくつかの属性は標準的なモバイル端末ブラウザがビデオ再生をハイジャックせずにインライン再生を実現するためのものです。ここでは例示するにとどめますが、必要に応じてご使用ください。x5-playsinline
属性をTBSカーネルに設定すると、X5UIのプレーヤーを使用できます。
https://<bucketname-appid>.cos.<region>.myqcloud.com/xxx.<ビデオ形式>
です。説明:
- クロスドメインの問題がある場合は、バケットのクロスドメインアクセスCORS設定を行う必要があります。詳細については、クロスドメインアクセスの設定をご参照ください。
- バケットがプライベート読み取り/書き込みの場合、オブジェクトアドレスには署名が必要です。詳細については、リクエスト署名をご参照ください。
var player = TCPlayer("player-container-id", {}); // player-container-idはプレーヤーコンテナIDであり、htmlのIDと一致している必要があります
player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COSビデオオブジェクトアドレス
説明:トランスコードされていないソースビデオは再生の際に互換性の問題が生じる可能性があるため、トランスコード後のビデオで再生を行うことをお勧めします。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>
var player = TCPlayer("player-container-id", {}); // player-container-idはプレーヤーコンテナIDであり、htmlのIDと一致している必要があります
player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4"); // COSビデオアドレス
サンプルコードを取得します。
PM3U8はプライベートM3U8ビデオファイルのことです。COSはプライベートM3U8 TSリソースの取得に用いるダウンロード権限承認APIを提供しています。プライベートM3U8インターフェースをご参照ください。
var player = TCPlayer("player-container-id", {
poster: "https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8?ci-process=pm3u8&expires=3600" // プライベートtsリソースurlのダウンロードクレデンシャルの相対有効期間は3600秒です
});
サンプルコードを取得します。
注意:Cloud Infiniteインテリジェントカバー機能により、最適なフレームを抽出してスクリーンキャプチャを生成し、それをカバーにすることでコンテンツの魅力をアップさせます。
var player = TCPlayer("player-container-id", {
poster: "https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.png"
});
サンプルコードを取得します。
ビデオコンテンツの安全性を保障し、ビデオの違法なダウンロードと拡散を防止するため、Cloud InfiniteはHLSビデオコンテンツに対する暗号化機能を提供します。この機能はプライベート読み取りファイルよりさらに高いセキュリティレベルを有します。暗号化されたビデオは、アクセス権限のないユーザーの視聴用に配信できなくなります。ビデオがローカルにダウンロードされた場合でも、ビデオ自体が暗号化されているため、悪意ある二次配信が不可能であり、ビデオの著作権が違法に侵害されないよう保障することができます。
操作手順は次のとおりです。
var player = TCPlayer("player-container-id", {}); // player-container-idはプレーヤーコンテナIDであり、htmlのIDと一致している必要があります
player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"); // hls暗号化ビデオアドレス
サンプルコードを取得します。
Cloud Infiniteのアダプティブビットレートストリーミング機能は、ビデオファイルをトランスコードおよびパッケージ化し、アダプティブビットレートストリーミング出力ファイルを生成することで、ユーザーがさまざまなネットワーク状態の下でビデオコンテンツをスピーディーに配信できるようサポートするものです。プレーヤーも現在の帯域幅に応じて、最適なビットレートを動的に選択して再生できるようになります。
操作手順は次のとおりです。
var player = TCPlayer("player-container-id", {}); // player-container-idはプレーヤーコンテナIDであり、htmlのIDと一致している必要があります
player.src("https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.m3u8"); // マルチビットレートビデオアドレス
サンプルコードを取得します。
プレーヤーはビデオに、位置と速度が変化するウォーターマークを追加することができます。動的ウォーターマーク機能を使用する際、プレーヤーによるオブジェクトの参照をグローバル環境に公開すると、動的ウォーターマークが簡単に除去できるため、公開してはなりません。Cloud Infiniteでは、クラウド側でのビデオに対する動的ウォーターマーク追加などの操作もサポートしています。詳細についてはウォーターマークテンプレートインターフェースをご参照ください。
var player = TCPlayer("player-container-id", {
plugins:{
DynamicWatermark: {
speed: 0.2, // 速度
content: "Tencent Cloud Infinite CI", // テキスト
opacity: 0.7 // 透明度
}
}
});
サンプルコードを取得します。
操作手順は次のとおりです。
var PosterImage = TCPlayer.getComponent('PosterImage');
PosterImage.prototype.handleClick = function () {
window.open('https://www.tencentcloud.com/products/ci'); // 広告リンクの設定
};
var player = TCPlayer('player-container-id', {
poster: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx..png', // 広告カバー画像
});
player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');
var adTextNode = document.createElement('span');
adTextNode.className = 'ad-text-node';
adTextNode.innerHTML = '広告';
var adCloseIconNode = document.createElement('i');
adCloseIconNode.className = 'ad-close-icon-node';
adCloseIconNode.onclick = function (e) {
e.stopPropagation();
player.posterImage.hide();
};
player.posterImage.el_.appendChild(adTextNode);
player.posterImage.el_.appendChild(adCloseIconNode);
サンプルコードを取得します。
操作手順は次のとおりです。
var player = TCPlayer('player-container-id', {
plugins: {
VttThumbnail: {
vttUrl: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.vtt' // 進捗画像VTTファイル
},
},
});
player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');
サンプルコードを取得します。
操作手順は次のとおりです。
var player = TCPlayer('player-container-id', {});
player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');
player.on('ready', function () {
// 字幕ファイルの追加
var subTrack = player.addRemoteTextTrack({
src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.srt', // 字幕ファイル
kind: 'subtitles',
srclang: 'zh-cn',
label: '中国語',
default: 'true',
}, true);
});
サンプルコードを取得します。
操作手順は次のとおりです。
var player = TCPlayer('player-container-id', {});
player.src('https://<BucketName-APPID>.cos.<Region>.myqcloud.com/xxx.mp4');
player.on('ready', function () {
// 中国語字幕の設定
var subTrack = player.addRemoteTextTrack({
src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/zh.srt', // 字幕ファイル
kind: 'subtitles',
srclang: 'zh-cn',
label: '中国語',
default: 'true',
}, true);
// 英語字幕の設定
var subTrack = player.addRemoteTextTrack({
src: 'https://<BucketName-APPID>.cos.<Region>.myqcloud.com/en.srt', // 字幕ファイル
kind: 'subtitles',
srclang: 'en',
label: '英語',
default: 'false',
}, true);
});
サンプルコードを取得します。
この記事はお役に立ちましたか?