このトピックでは、Web 用 Player SDK を統合して使用し、オーディオファイルとビデオファイルを再生する方法について説明します。
使用上の注意
このトピックでは、Web 用 Player SDK V2.25.1 を例として使用しています。最新バージョンを使用することをお勧めします。詳細については、SDK の概要とダウンロードをご参照ください。
Web 用 Player SDK V2.14.0 以降は H.265 ビデオの再生をサポートし、Web 用 Player SDK V2.20.2 以降は H.266 ビデオの再生をサポートします。このトピックでは、Web 用 Player SDK を統合して使用し、H.264 ビデオを再生する方法について説明します。SDK を使用して H.265 および H.266 ビデオを再生する方法の詳細については、「H.265 および H.266 ビデオの再生」をご参照ください。
手順
ステップ 1: Web 用 Player SDK を統合する
ノードパッケージマネージャ(NPM)を使用して、Web 用 Player SDK を統合します。サンプルコード:
//npm install aliyun-aliplayer --save を実行して NPM パッケージをインストールします。
import Aliplayer from 'aliyun-aliplayer';
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
または、次の手順を実行して、.js ファイルを使用して Web 用 Player SDK を統合します。
<!--以下のコンテンツでは、Web 用 Player SDK V2.25.1 を例として使用しています。他のバージョンを使用する場合は、バージョン番号を取得し、サンプルコードの 2.25.1 を目的のバージョン番号に置き換えてください。-->
<head>
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" /> <!-- オプション。HTML5 プレーヤーを使用して再生する場合は、.css ファイルをプロジェクトに追加します。 -->
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script> <!-- 必須。.js ファイルを追加する必要があります。 -->
</head>
プレーヤーのコンテナを指定します。
<body>
タグの下に、プレーヤーのマウントに使用する <div>
ノードを追加します。サンプルコード:
<body>
<div id="J_prismPlayer"></div>
</body>
ステップ 2: マウント要素を提供する
再生 UI をマウントするための <div>
要素を <body>
タグに追加します。サンプルコード:
<body>
<div id="J_prismPlayer"></div>
</body>
ステップ 3: ライセンスを設定する
2024 年 12 月 1 日以降、SDK を使用する前に、次の操作を実行して Web 用 Player SDK のライセンスを設定する必要があります。
Player SDK は、1 年間有効な無料ライセンスを提供します。詳細については、「ライセンスの管理」をご参照ください。
ライセンスを設定した後、プレーヤー UI にライセンス関連のエラーが報告されない場合は、ライセンスは正しく設定されています。
プレーヤーが存在するページのドメイン名が、ライセンスの申請時に指定したドメイン名と同じか、そのサブドメインであることを確認してください。そうでない場合、ライセンス検証は失敗します。
プレーヤーを初期化するときに、登録済みドメイン名やライセンスキーなど、ライセンス関連のフィールドを指定します。
var player = new Aliplayer({
license: {
domain: "example.com", // ライセンスの申請時に指定したドメイン名。
key: "example-key" // ライセンスの申請後にコンソールに表示されるライセンスキー。
}
});
ビデオを再生する
<script>
タグの下に次のサンプルコードを追加します。
オンデマンドビデオを再生する
URL に基づく再生
URL からビデオを再生するには、source パラメーターを再生 URL に設定する必要があります。サードパーティの VOD サービスまたは ApsaraVideo VOD に保存されているオーディオファイルまたはビデオファイルの再生 URL を指定できます。
GetPlayInfo オペレーションを呼び出して、ApsaraVideo VOD に保存されているメディアファイルの再生 URL を取得できます。メディア再生 URL を取得するには、ApsaraVideo VOD SDK を使用することをお勧めします。これにより、複雑な署名計算から解放されます。 GetPlayInfo オペレーションの詳細については、OpenAPI Explorer をご覧ください。
var player = new Aliplayer({
id: 'J_prismPlayer',
source: '<再生 URL>', // サードパーティの VOD サービスまたは ApsaraVideo VOD に保存されているオーディオファイルまたはビデオファイルの再生 URL。
},function(player){
console.log('プレーヤーが作成されました。')
});
VID と PlayAuth に基づく再生
VID と PlayAuth に基づいてビデオを再生するには、vid パラメーターをオーディオまたはビデオ ID に設定し、playauth パラメーターを再生クレデンシャルに設定する必要があります。
オーディオファイルまたはビデオファイルをアップロードした後、ApsaraVideo VOD コンソールにログインし、メディアファイルオーディオ/ビデオSearchMedia > を選択して、オーディオファイルまたはビデオファイルの ID を表示できます。または、ApsaraVideo VOD SDK によって提供される オペレーションを呼び出して、ID を取得することもできます。
GetVideoPlayAuthOpenAPI エクスプローラー オペレーションを呼び出して、再生クレデンシャルを取得できます。 ApsaraVideo VOD でのメディア再生のクレデンシャルを取得するには、ApsaraVideo VOD SDK を統合することをお勧めします。これにより、複雑な署名計算から解放されます。 GetVideoPlayAuth オペレーションの詳細については、 をご覧ください。
この再生メソッドを使用することをお勧めします。 セキュリティトークンサービス (STS) に基づくビデオ再生と比較して、VidAuth ベースの再生は使いやすく、より安全です。 2 つの再生メソッドの比較については、「クレデンシャルと STS の比較」をご参照ください。
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
vid : '<ビデオ ID>', // 必須。オーディオファイルまたはビデオファイルの ID。例:1e067a2831b641db90d570b6480f****。
playauth : '<PlayAuth>', // 必須。再生クレデンシャル。
// authTimeout: 7200, // 再生 URL の有効期間。単位:秒。デフォルト値:7200。 ApsaraVideo VOD コンソールで署名付き URL の有効期間を設定している場合、このパラメーターの設定が優先されます。このパラメーターを空のままにすると、デフォルト値が使用されます。有効期間は、ビデオの実際の再生時間よりも長くする必要があります。そうでない場合、再生が完了する前に再生 URL の有効期限が切れます。
},function(player){
console.log('プレーヤーが作成されました。')
});
STS に基づく再生
STS ベースの再生を使用する場合、再生クレデンシャルではなく一時的な STS トークンが使用されます。この場合、事前に AssumeRole 操作を呼び出して STS トークンを取得する必要があります。詳細については、「STS を使用して動画をアップロードする」をご参照ください。
var player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
vid : '<ビデオ ID>', // 必須。オーディオファイルまたはビデオファイルをアップロードした後、ApsaraVideo VOD コンソールにログインし、[メディアファイル] > [オーディオ/ビデオ] を選択して、オーディオファイルまたはビデオファイルの ID を表示できます。または、ApsaraVideo VOD SDK によって提供される SearchMedia オペレーションを呼び出して、ID を取得することもできます。例:1e067a2831b641db90d570b6480f****。
accessKeyId: '<AccessKey ID>', // 必須。 AccessKey ID は、一時的な STS トークンが生成されるときに返されます。
securityToken: '<STS トークン>', // 必須。 STS トークン。 STS トークンを取得するには、AssumeRole オペレーションを呼び出します。
accessKeySecret: '<AccessKey Secret>', // 必須。 AccessKey シークレットは、一時的な STS トークンが生成されるときに返されます。
region: '<ビデオのリージョン>', // 必須。メディアアセットが存在するリージョンの ID。例:cn-shanghai、eu-central-1、ap-southeast-1。
// authTimeout: 7200, // 再生 URL の有効期間。単位:秒。デフォルト値:7200。 ApsaraVideo VOD コンソールで署名付き URL の有効期間を設定している場合、このパラメーターの設定が優先されます。このパラメーターを空のままにすると、デフォルト値が使用されます。有効期間は、ビデオの実際の再生時間よりも長くする必要があります。そうでない場合、再生が完了する前に再生 URL の有効期限が切れます。
},function(player){
console.log('プレーヤーが作成されました。')
});
暗号化再生
ApsaraVideo VOD は、Alibaba Cloud 専用の暗号化とデジタル著作権管理 (DRM) 暗号化をサポートしています。詳細については、「暗号化されたビデオを再生する」をご参照ください。
Web 用 ApsaraVideo Player の初期化方法の詳細については、「パラメーター」をご参照ください。
ライブストリームを再生する
URL ベースのライブストリーミング
URL からコンテンツをストリーミングするには、source パラメーターをストリーミング URL に設定し、isLive パラメーターを true に設定する必要があります。
サードパーティのライブストリーミング サービスまたは ApsaraVideo Live で、ライブストリームのストリーミング URL を指定できます。ApsaraVideo Live コンソールには、ストリーミング URL の生成に役立つ URL ジェネレーターが用意されています。詳細については、「URL ジェネレーター」をご参照ください。
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
source: '<再生 URL>', // ストリーミング URL は、サードパーティのストリーミング URL または ApsaraVideo Live で生成されたストリーミング URL にすることができます。
isLive: true, // ライブストリームを再生するかどうかを指定します。
},function(player){
console.log('プレーヤーが作成されました。')
});
</script>
DRM で暗号化されたライブストリーミング
DRM で暗号化されたライブストリーミングの詳細については、「暗号化されたビデオを再生する」をご参照ください。
リアルタイムストリーミング(RTS)
RTS を使用すると、追加のパラメーターを構成することなく、URL から動画を再生できます。
ApsaraVideo Live コンソール の URL ジェネレーター を使用して、RTS URL を生成できます。詳細については、「URL ジェネレーター」をご参照ください。
ApsaraVideo Player は、RTS SDK を統合することで RTS 再生を実装します。デフォルトでは、最新バージョンの RTS SDK が統合されています。パラメーターを設定することで、RTS SDK のバージョンを指定することもできます。たとえば、rtsVersion: '2.2.1' を指定します。
ブラウザが RTS をサポートしていない場合、または RTS 経由のストリームフェッチングが失敗した場合、システムは自動的に HTTP ライブストリーミングプロトコル(HLS)または HTTP Flash Video(HTTP-FLV)などのダウングレードされたプロトコルを介してストリームを再生します。ブラウザが FLV をサポートしている場合、システムは最初に FLV 経由でストリームを再生します。
<script>
var player = new Aliplayer({
id: 'J_prismPlayer',
source: '<再生 URL>', // RTS 再生 URL。 artc:// プロトコルが使用されます。 //
isLive: true, // ライブストリームを再生するかどうかを指定します。
// rtsFallback: false, // オプション。 RTS 再生ダウングレード機能を有効にするかどうかを指定します。デフォルト値:true。
// rtsFallbackType: 'HLS', // オプション。使用するダウングレードされたプロトコル。 HLS または FLV を指定できます。デフォルトでは、このパラメーターは空のままです。この場合、デフォルトのポリシーが使用され、システムは最初に FLV 経由でストリームを再生しようとします。ブラウザが FLV をサポートしていない場合、システムは HLS 経由でストリームを再生します。
// rtsFallbackSource: '<再生 URL>', // オプション。使用するダウングレードされたプロトコル。
// rtsVersion: 'x.x.x', // オプション。 RTS SDK のバージョン。
},function(player){
console.log('プレーヤーが作成されました。')
});
// RTS 経由でストリームがフェッチされるときにトリガーされるイベント。このイベントをリッスンして TraceId を取得します。イベントコールバックでは、traceId はストリームフェッチングに使用される TraceId を示し、source は RTS ストリームの再生 URL を示します。
player.on('rtsTraceId', function(event) {
console.log('EVENT rtsTraceId', event.paramData);
})
// ダウングレードされたプロトコルが再生に使用されるときにトリガーされるイベント。 reason はダウングレードの原因を示し、fallbackUrl は代替 URL を示します。
player.on('rtsFallback', function(event) {
console.log(' EVENT rtsFallback', event.paramData);
})
</script>
FAQ
Vue プロジェクトに Web 用 Player SDK を統合するにはどうすればよいですか?
Web 用 Player SDK は、Vue フレームワークと Web 用 Player SDK を統合するためのデモのソースコードを提供します。デモの詳細については、「デモのオンライントライアルとソースコード」をご参照ください。
uni-app に Web 用 Player SDK を統合するにはどうすればよいですか?
uni-app に Web 用 Player SDK を統合する方法については、「デモのオンライントライアルとソースコード」をご参照ください。
クロスリージョン再生の問題をどのように処理すればよいですか?
Player SDK for Web の CORS 構成については、「CORS を構成する」をご参照ください。
詳細については、「Web 用 Player SDK に関する FAQ」をご参照ください。