ApsaraVideo Player SDK for Web を Web アプリケーションに統合し、基本的な動画再生を設定します。
注意事項
このトピックでは、ApsaraVideo Player SDK for Web V2.25.1 を例として使用します。最新バージョンを推奨します。ダウンロードについては、「ApsaraVideo Player SDK のダウンロード」をご参照ください。
ApsaraVideo Player SDK for Web V2.14.0 以降は H.265 の動画再生を、V2.20.2 以降は H.266 をサポートしています。このトピックでは H.264 について説明します。H.265 および H.266 については、「H.265 および H.266 動画の再生」をご参照ください。
事前準備
Web サイトのドメイン名とライセンスキーを取得していること。「ライセンスの管理」をご参照ください。
AI スキルを使用したクイックアクセス
Qoder や Claude Code など、Agent Skills をサポートする AI プログラミングツールを使用している場合、公式のプレーヤースキルをインストールすると、AI が直接実行可能な統合コードを生成します。
インストール
方法 1:プロジェクトのルートディレクトリでコマンドを実行して自動的にインストールします。
npx skills add https://player.alicdn.com/file/aliplayer-web-setup.tar.gz方法 2:解凍パッケージを手動でダウンロードし、AI プログラミングツールの skills ディレクトリに配置します。
aliplayer-web-setup ディレクトリを対応するツールの skills ディレクトリにコピーします。例:
グローバルに有効:~/.qoder/skills/aliplayer-web-setup/
現在のプロジェクトでのみ有効:<プロジェクトのルートディレクトリ>/.qoder/skills/aliplayer-web-setup/
他の AI プログラミングツールの skills ディレクトリパスについては、公式ドキュメントをご参照ください。
説明2 つのインストール方法のどちらの場合も、完了後に AI プログラミングツールを再起動してスキルを有効にする必要があります。
使用
自然言語で要件を記述します。例:「React プロジェクトで Aliyun プレーヤーを使用して、オンデマンドビデオを再生したい。プライベート暗号化が必要」。
AI はまずフロントエンドフレームワーク、オンデマンド/ライブ配信、暗号化の有無、ビデオソースモードなどの情報を確認し、その後、完全なプレーヤー統合コードを出力します。
生成されたコードはデフォルトでテストライセンスを使用しており、ローカルでのデバッグに限定されます。本番環境で利用する場合は、コンソールで申請した公式ライセンスに置き換える必要があります。詳細については、「ライセンスの管理」をご参照ください。
手動でのクイック統合
ここでは、基本的な Web プロジェクトに ApsaraVideo Player SDK for Web を統合する手順を説明します。React または Vue の場合は、「オンライン試用とデモソースコード」からデモをダウンロードしてください。
1. Web SDK のインポート
NPM パッケージを使用したインポート
プロジェクトに
aliyun-aliplayerの依存関係を追加します。npm install aliyun-aliplayer --saveコード内でコードパッケージとスタイルファイルをインポートします。
import Aliplayer from 'aliyun-aliplayer'; import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
script タグを使用したインポート
V2.16.3 以降、JavaScript および CSS ファイルが保存されているパスが変更されました。
旧:
CSS: https://g.alicdn.com/de/prismplayer/version/skins/default/aliplayer-min.css
JS: https://g.alicdn.com/de/prismplayer/version/aliplayer-min.js
新:
CSS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/skins/default/aliplayer-min.css
JS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/aliplayer-min.js
<!-- このトピックでは、Web 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" /> // 必須。この 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>2. マウント要素の準備
<body> タグと <div> ノードを追加して、プレーヤー UI をマウントします。サンプルコード:
<body>
<div id="J_prismPlayer"></div>
</body>3. SDK の初期化
SDK は id="J_prismPlayer" を持つ DOM ノードを特定し、プレーヤー UI をレンダリングします。
var player = new Aliplayer({
id: 'J_prismPlayer',
license: {
// 準備したドメイン名とライセンスキーを使用します
domain: "example.com", // ライセンスを申請したときに指定したドメイン名
key: "example-key" // ライセンスを申請した後に ApsaraVideo VOD コンソールに表示されるライセンスキー
}
});動画の再生
さまざまなシナリオに合わせてプレーヤーを設定します。
オンデマンドビデオの再生
URL に基づく再生
source パラメーターを、サードパーティサービスまたは ApsaraVideo VOD のメディアファイルの再生 URL に設定します。
GetPlayInfo API を呼び出して、ApsaraVideo VOD 内のメディアファイルの再生 URL を取得します。複雑な署名計算を避けるために、ApsaraVideo VOD SDK を統合することを推奨します。OpenAPI Explorer で API をお試しください。
var player = new Aliplayer(
{
id: "J_prismPlayer",
source: "<再生 URL>", // サードパーティの VOD サービスまたは ApsaraVideo VOD に保存されているメディアファイルの再生 URL。
},
function (player) {
console.log("The player is created.");
}
);VID と PlayAuth に基づく再生
vid をメディア ID に、再生認証情報 (PlayAuth) を設定します。
メディアファイルをアップロードした後、ApsaraVideo VOD コンソールの [メディアファイル] > [オーディオ/ビデオ] で ID を確認します。または、SearchMedia API を呼び出します。
GetVideoPlayAuth API を呼び出して、再生認証情報を取得します。複雑な署名計算を避けるために、ApsaraVideo VOD SDK を統合することを推奨します。OpenAPI Explorer で API をお試しください。
シンプルさとセキュリティの観点から、STS 方式よりも VidAuth に基づく再生を推奨します。比較については、「認証情報方式と STS 方式の比較」をご参照ください。
var player = new Aliplayer(
{
id: "J_prismPlayer",
width: "100%",
vid: "<ビデオ ID>", // 必須。メディアファイルの ID。例:1e067a2831b641db90d570b6480f****。
playauth: "<PlayAuth>", // 必須。再生認証情報 (PlayAuth)。
// authTimeout: 7200, // 再生 URL の有効期間。単位:秒。この設定は、ApsaraVideo VOD コンソールで設定した有効期間を上書きします。このパラメーターを空のままにすると、デフォルト値の 7200 が使用されます。有効期間は、動画の実際の再生時間よりも長くする必要があります。そうしない場合、再生が完了する前に再生 URL が期限切れになります。
},
function (player) {
console.log("The player is created.");
}
);
VID と STS に基づく再生
STS に基づく再生では、再生認証情報の代わりに一時的な STS トークンを使用します。AssumeRole API を呼び出して STS トークンを取得します。詳細については、「STS トークンの取得」をご参照ください。
var player = new Aliplayer(
{
id: "J_prismPlayer",
width: "100%",
vid: "<ビデオ ID>", // 必須。オーディオまたはビデオファイルをアップロードした後、ApsaraVideo VOD コンソールにログインし、[メディアファイル] > [オーディオ/ビデオ] を選択して、オーディオまたはビデオファイルの ID を確認できます。または、ApsaraVideo VOD SDK が提供する SearchMedia API を呼び出して ID を取得することもできます。例:1e067a2831b641db90d570b6480f****。
accessKeyId: "<AccessKey ID>", // 必須。一時的な STS トークンが生成されるときに返される AccessKey ID。
securityToken: "<STS トークン>", // 必須。STS トークン。STS トークンを取得するには、AssumeRole API を呼び出します。
accessKeySecret: "<AccessKey Secret>", // 必須。一時的な STS トークンが生成されるときに返される AccessKey Secret。
region: "<ビデオのリージョン>", // 必須。メディアアセットが存在するリージョンの ID (cn-shanghai、eu-central-1、ap-southeast-1 など)。
// authTimeout: 7200, // 再生 URL の有効期間。単位:秒。この設定は、ApsaraVideo VOD コンソールで設定した有効期間を上書きします。このパラメーターを空のままにすると、デフォルト値の 7200 が使用されます。有効期間は、動画の実際の再生時間よりも長くする必要があります。そうしない場合、再生が完了する前に再生 URL が期限切れになります。
},
function (player) {
console.log("The player is created.");
}
);暗号化再生
ApsaraVideo VOD は、Alibaba Cloud 独自の暗号化技術と DRM 暗号化をサポートしています。「Web ブラウザで暗号化された動画を再生する」をご参照ください。
VID 再生モードを使用してプレーヤーを初期化すると、Aliplayer SDK は GetPlayInfo リクエストを vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) に送信して再生アドレスを取得します。ネットワークがこのドメイン名にアクセスできない場合 (イントラネット環境など) 、リクエストはタイムアウトするか失敗します。vod.{region}.aliyuncs.com (vod-product.{region}aliyuncs.com) と CDN ドメイン名がネットワークからアクセス可能であることを確認してください。
すべての初期化オプションについては、「パラメーター」をご参照ください。
ライブストリームの再生
URL ベースのライブストリーミング
source をストリーミング URL に、isLive を true に設定します。
ストリーミング URL は、サードパーティサービスまたは ApsaraVideo Live から取得できます。ApsaraVideo Live コンソールのURL ジェネレーターで URL を生成します。
var player = new Aliplayer(
{
id: "J_prismPlayer",
source: "<再生 URL>", // サードパーティまたは ApsaraVideo Live のストリーミング URL。
isLive: true, // ライブストリームを再生するかどうかを指定します。
},
function (player) {
console.log("The player is created.");
}
);DRM 暗号化ライブストリーミング
DRM 暗号化ライブストリーミングについては、「暗号化された動画の再生」をご参照ください。
リアルタイムストリーミング (RTS)
RTS は、追加のパラメーターなしで URL から動画を再生します。
ApsaraVideo Live コンソールのURL ジェネレーターで RTS URL を生成します。
プレーヤーは RTS 再生のために RTS SDK を統合します。デフォルトでは最新バージョンが使用されます。rtsVersion パラメーターで上書きできます。
RTS が利用できない場合、プレーヤーは HLS または HTTP-FLV にフォールバックします。サポートされている場合は FLV が優先されます。
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>', // オプション。フォールバック再生用の URL。
// rtsVersion: 'x.x.x', // オプション。RTS SDK のバージョン。
},
function (player) {
console.log("The player is created.");
}
);
// 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);
});
関連ドキュメント
プレーヤーのプロパティ、メソッド、イベントについては、「Aliplayer API リファレンス」をご参照ください。