ApsaraVideo Player SDK for Webの統合 - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

このトピックでは、ApsaraVideo Player SDK for Webを統合して使用し、オーディオおよびビデオファイルを再生する方法について説明します。

使用上の注意

このトピックでは、ApsaraVideo Player SDK for Web V2.25.1を例として使用します。 最新バージョンを使用することをお勧めします。詳細については、「SDKの概要とダウンロード」をご参照ください。
ApsaraVideo Player SDK for Webでは、HTML5プレーヤーまたはFlashプレーヤーを使用してオーディオおよびビデオファイルを再生できます。 ApsaraVideo Player SDK for Webを統合する前に、使用するプレーヤーを決定し、その機能とさまざまなブラウザーとの互換性について学ぶ必要があります。詳細については、「概要」をご参照ください。
ApsaraVideo Player SDK for Web V2.14.0以降はH.265ビデオの再生をサポートし、ApsaraVideo Player SDK for Web V2.20.2以降はH.266ビデオの再生をサポートします。このトピックでは、ApsaraVideo Player SDK for Webを統合して使用し、H.264ビデオを再生する方法について説明します。 SDKを使用してH.265およびH.266ビデオを再生する方法の詳細については、「H.265およびH.266ビデオの再生」をご参照ください。

手順

ApsaraVideo Player SDK for Webを統合します。
ノードパッケージマネージャー (NPM) を使用して、ApsaraVideo Player SDK for Webを統合します。サンプルコード：
```
//Run npm install aliyun-aliplayer --save to install the NPM package.
import Aliplayer from 'aliyun-aliplayer';
import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';
```
または、.jsファイルを使用してApsaraVideo Player SDK for Webを統合するには、次の手順を実行します。
- アダプティブ.jsファイルを追加します。
  アダプティブ.jsファイルには、複数のデバイス上のFlashプレーヤーとHTML5プレーヤーの適応ロジックが含まれています。 .jsファイルを追加した後、ApsaraVideo Player SDK for Webは、環境に基づいてプレーヤーを自動的に選択します。HTMLドキュメントの <head> タグの下にあるApsaraVideo Player SDK for Webの.jsファイルと.cssファイルを追加します。サンプルコード：
```

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. 
  <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>  // Required. You must add the .js file. 
</head>
```
  説明
  .jsファイルを追加した後、Flashプレーヤーを使用するにはuseFlashPrism=trueを指定し、HTML5プレーヤーを使用するにはuseH5Prism=trueを指定します。
- シングルモード.jsファイルを追加します。
  FlashプレーヤーまたはHTML5プレーヤーのみを使用する場合は、ファイルのサイズを縮小するためにプロジェクトに使用するプレーヤーのみに.jsファイルを追加します。
  - HTML5プレーヤーを使用する場合は、HTMLドキュメントの <head> タグの下にあるApsaraVideo Player SDK for Webの.jsファイルと.cssファイルを追加します。サンプルコード：
    <head> <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" /> // Required. You must add the .css file to use the HTML5 player. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-h5-min.js"></script> // Required. You must add the .js file to use the HTML5 player. </head>
  - Flash playerを使用する場合は、HTMLドキュメントの <head> タグの下にあるApsaraVideo Player SDK for Webの.jsファイルを追加します。サンプルコード：
    <head> <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-flash-min.js"></script> // Required. You must add the .js file to use the Flash player. </head>
  Internet Explorer 8でFlash playerを使用する場合は、HTMLドキュメントの <head> タグの下にjson.min.jsファイルへの参照を追加する必要があります。サンプルコード：
```
https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/json/json.min.js
```
  説明
  上記のサンプルコードを使用して、ApsaraVideo Player SDK for Web V2.16.3以降を統合できます。 V2.16.3より前のバージョンのApsaraVideo Player SDK for Webを統合するには、上記のコードの /apsara-media-box/imp-web-playerを /de/prismplayerに置き換えます。次のサンプルコードでは、ApsaraVideo Player SDK for Web V2.15.2のアダプティブ.jsファイルを追加する方法について説明します。
  <head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" /> // Optional. If you want to use the HTML5 player for playback, add the .css file to your project. <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-min.js"></script> // Required. You must add the .js file. </head>
プレーヤーのコンテナを指定します。
<body> タグの下に、プレーヤーをマウントするために使用される <div> ノードを追加します。サンプルコード：
```
<body>
  <div id="J_prismPlayer"></div>
</body>
```

ライセンスを設定します。
説明
- 2024年12月1日以降、SDKを使用する前に、次の操作を実行してApsaraVideo Player SDK for Webのライセンスを設定する必要があります。
- ApsaraVideo Player SDKは、1年間有効な無料ライセンスを提供します。詳細については、「ライセンスの管理」をご参照ください。
- ライセンスを設定した後、プレーヤーUIでライセンス関連のエラーが報告されない場合、ライセンスは正しく設定されています。
- プレーヤーが存在するページのドメイン名が、ライセンスまたはドメイン名のサブドメインを申請するときに指定されたドメイン名と同じであることを確認してください。それ以外の場合、ライセンス検証は失敗します。 localhostを指定した場合、ライセンスは検証されません。
プレーヤーを初期化するときは、登録されたドメイン名やライセンスキーなど、ライセンス関連のフィールドを指定します。
```
var player = new Aliplayer({
  license: {
    domain: "example.com", // The domain name that you specified when you apply for a license.
    key: "example-key" // The license key that is displayed in the console after you apply for the license.
  }
});
```
プレイヤーをインスタンス化します。
<script> タグの下に次のサンプルコードを追加します。
オンデマンドビデオの再生
URLに基づく再生
URLからビデオを再生するには、ソースパラメーターを再生URLに設定する必要があります。サードパーティのVODサービスまたはApsaraVideo VODに保存されているオーディオファイルまたはビデオファイルの再生URLを指定できます。
GetPlayInfo操作を呼び出して、ApsaraVideo VODに保存されているメディアファイルの再生URLを取得できます。 ApsaraVideo VOD SDKを使用してメディア再生URLを取得することを推奨します。これにより、複雑な署名計算から解放されます。 GetPlayInfo操作の詳細については、「OpenAPI Explorer」をご覧ください。
```
var player = new Aliplayer({
        id: 'J_prismPlayer',
        source: '<your play URL>', // The playback URL of an audio or video file stored in a third-party VOD service or in ApsaraVideo VOD. 
      },function(player){
        console.log('The player is created.')
     });
```
VIDとPlayAuthに基づく再生
VIDとPlayAuthに基づいてビデオを再生するには、vidパラメーターをオーディオIDまたはビデオIDに設定し、playauthパラメーターを再生資格情報に設定する必要があります。
1. オーディオまたはビデオファイルをアップロードした後、ApsaraVideo VODコンソールにログインし、[メディアファイル] > [オーディオ /ビデオ] を選択して、オーディオまたはビデオファイルのIDを表示します。または、
  IDを取得するためにApsaraVideo VOD SDKによって提供されるSearchMedia操作メソッドを呼び出すこともできます。
2. GetVideoPlayAuth操作を呼び出して、再生資格情報を取得できます。 ApsaraVideo VOD SDKを統合して、ApsaraVideo VODでのメディア再生用の資格情報を取得することを推奨します。これにより、複雑な署名計算から解放されます。 GetVideoPlayAuth操作の詳細については、「OpenAPI Explorer」をご覧ください。
この再生方法を使用することを推奨します。 Security Token Service (STS) に基づくビデオ再生と比較して、VidAuthベースの再生は使いやすく、より安全です。 2つの再生方法の比較の詳細については、「資格情報とSTSの比較」をご参照ください。
```
var player = new Aliplayer({
           id: 'J_prismPlayer',
           width: '100%',
           vid : '<your video ID>', // Required. The ID of the audio or video file. Example: 1e067a2831b641db90d570b6480f****. 
           playauth : '<your PlayAuth>', // Required. The playback credential. 
           // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. Default value: 7200. If you have configured a validity period for signed URLs in the ApsaraVideo VOD console, the configuration of this parameter takes precedence. If you leave this parameter empty, the default value is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete. 
         },function(player){
           console.log('The player is created.')
        });
```
STSに基づく再生
STSベースの再生を使用する場合は、再生資格情報ではなく一時的なSTSトークンが使用されます。この場合、事前にAssumeRole操作を呼び出してSTSトークンを取得する必要があります。詳細については、「STSを使用した動画のアップロード」をご参照ください。
```
var player = new Aliplayer({
       id: 'J_prismPlayer',
       width: '100%',
       vid : '<your video ID>', // Required. After you upload an audio or video file, you can log on to the ApsaraVideo VOD console and choose Media Files > Audio/Video to view the ID of the audio or video file. Alternatively, you can call the SearchMedia operation provided by the ApsaraVideo VOD SDK to obtain the ID. Example: 1e067a2831b641db90d570b6480f****. 
       accessKeyId: '<your AccessKey ID>', // Required. The AccessKey ID is returned when the temporary STS token is generated. 
       securityToken: '<your STS token>', // Required. The STS token. To obtain an STS token, call the AssumeRole operation. 
       accessKeySecret: '<your AccessKey Secret>', // Required. The AccessKey secret is returned when the temporary STS token is generated. 
       region: '<region of your video>', // Required. The ID of the region in which the media asset resides, such as cn-shanghai, eu-central-1, or ap-southeast-1. 
       // authTimeout: 7200, // The validity period of the playback URL. Unit: seconds. Default value: 7200. If you have configured a validity period for signed URLs in the ApsaraVideo VOD console, the configuration of this parameter takes precedence. If you leave this parameter empty, the default value is used. The validity period must be longer than the actual duration of the video. Otherwise, the playback URL expires before the playback is complete. 
     },function(player){
       console.log('The player is created.')
       });
```
暗号化再生
ApsaraVideo VODは、Alibaba Cloud独自の暗号化およびデジタル著作権管理 (DRM) 暗号化をサポートしています。詳細については、「暗号化ビデオの再生」をご参照ください。
ライブストリームを再生
URLベースのライブストリーミング
URLからコンテンツをストリーミングするには、ソースパラメーターをストリーミングURLに設定し、isLiveパラメーターをtrueに設定する必要があります。
サードパーティのライブストリーミングサービスまたはApsaraVideo liveでライブストリームのストリーミングURLを指定できます。 ApsaraVideo Liveコンソールには、ストリーミングURLの生成に役立つURLジェネレータがあります。詳細については、「URLジェネレーター」をご参照ください。
```
<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>', // The streaming URL can be a third-party streaming URL or a streaming URL that is generated in ApsaraVideo Live. 
    isLive: true, // Specifies whether to play live streams. 
    },function(player){
      console.log('The player is created.')
    });
</script>
```
DRM暗号化されたライブストリーミング
DRM暗号化されたライブストリーミングの詳細については、「暗号化されたビデオの再生」をご参照ください。
リアルタイムストリーミング (RTS)
RTSを使用すると、追加のパラメーターを設定することなく、URLからビデオを再生できます。
1. ApsaraVideo LiveコンソールのURLジェネレーターを使用して、RTS URLを生成できます。詳細については、「URLジェネレーター」をご参照ください。
2. ApsaraVideo Playerは、RTS SDKを統合してRTS再生を実装します。デフォルトでは、最新バージョンのRTS SDKが統合されています。パラメーターを設定して、RTS SDKのバージョンを指定することもできます。たとえば、rtsVersion: '2.2.1 'を指定します。
3. ブラウザがRTSをサポートしていない場合、またはRTSを介したストリームのプルが失敗した場合、システムはHTTPライブストリーミング (HLS) やHTTPフラッシュビデオ (HTTP-FLV) などの劣化したプロトコルを介してストリームを自動的に再生します。ブラウザがFLVをサポートしている場合、システムは最初にFLV経由でストリームを再生します。
```
<script>
var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>', // The RTS playback URL. The artc:// protocol is used. // 
    isLive: true, // Specifies whether to play live streams. 
    // rtsFallback: false, //Optional. Specifies whether to enable the RTS playback degradation feature. Default value: true.
    // rtsFallbackType: 'HLS', //Optional. The degraded protocol that you want to use. You can specify HLS or FLV. By default, this parameter is left empty. In this case, the default policy is used and the system tries to play the stream over FLV first. If your browser does not support FLV, the system plays the stream over HLS.
    // rtsFallbackSource: '<your play URL>', // Optional. The degraded protocol that you want to use.
    // rtsVersion: 'x.x.x', // Optional. The version of the RTS SDK. 
},function(player){
    console.log('The player is created.')
});
// The event that is triggered when a stream is pulled over RTS. Listen for this event to obtain the TraceId.   In the event callback, traceId indicates the TraceId that is used for stream pulling and source indicates the playback URL of the RTS stream. 
player.on('rtsTraceId', function(event) {
    console.log('EVENT rtsTraceId', event.paramData);
})
// The event that is triggered when a degraded protocol is used for playback. reason indicates the degradation cause and fallbackUrl indicates the alternative URL. 
player.on('rtsFallback', function(event) {
    console.log(' EVENT rtsFallback', event.paramData);
})
</script>
```

よくある質問

ApsaraVideo Player SDK for WebをVueプロジェクトに統合するにはどうすればよいですか?

ApsaraVideo Player SDK for Webは、ApsaraVideo Player SDK for WebをVueフレームワークと統合するためのデモのソースコードを提供します。デモの詳細については、「デモのオンライントライアルとソースコード」をご参照ください。

詳細については、「ApsaraVideo Player SDK For Webに関するよくある質問」をご参照ください。

ApsaraVideo VOD:クイック統合

使用上の注意

手順

オンデマンドビデオの再生

URLに基づく再生

VIDとPlayAuthに基づく再生

STSに基づく再生

暗号化再生

ライブストリームを再生

URLベースのライブストリーミング

DRM暗号化されたライブストリーミング

リアルタイムストリーミング (RTS)

よくある質問

ApsaraVideo Player SDK for WebをVueプロジェクトに統合するにはどうすればよいですか?

関連ドキュメント