ApsaraVideo Live:Web ページでのライブストリーミング

ステップ 1：アップストリーミング URL とストリーミング URL の生成

ライブストリームのプッシュにはインジェスト URL を、再生のためのプルにはストリーミング URL を使用します。詳細については、「インジェスト URL とストリーミング URL を生成する」をご参照ください。

URL ジェネレーターページで、[ストリーミングドメイン]、関連付けられた [アップストリーミングドメイン] (認証はデフォルトでモード A、URL は 30 分間有効)、[AppName]、[StreamName]、[トランスコードテンプレート] を設定します。[生成] をクリックして、アップストリーミング URL とストリーミング URL を作成します。

ステップ 2：ライブストリームのアップストリーミング

アップストリーミングでは、キャプチャされたオーディオとビデオを ApsaraVideo Live センターに配信します。次の例では、OBS Studio を使用してストリームをアップストリーミングします。

1. 公式ウェブサイトから OBS Studio をダウンロードして、インストールします。

2. OBS Studio を起動します。

3. メニューバーで [ファイル] > [設定] の順に選択します。

4. [設定] ページで [配信] をクリックし、次のパラメーターを設定します。

   パラメーター	説明
   サービス	[カスタム] を選択します。
   サーバー	生成された認証済みのアップストリーミング URL を入力します。例: rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************
   ストリームキー	ストリームキーは空のままにします。

5. OBS Studio のメインウィンドウで [ソース] セクションにソースを追加し、[配信開始] をクリックします。

6. ストリーム管理ページに移動します。[アクティブなストリーム] タブで、アクティブなストリームを表示および管理できます。

ステップ 3：ライブストリームの再生

ApsaraVideo Player SDK for Web を使用してライブストリームを再生できます。詳細については、「Web プレーヤー」をご参照ください。

ApsaraVideo Player SDK for Web を統合し、Web ページでライブストリームを再生するには、次の手順を実行します。

1. 指定された .js ファイルをプロジェクトに追加します。

   ApsaraVideo Player SDK for Web は、フロントエンドの .js ライブラリに依存しません。次の .js ファイルをプロジェクトに追加して、プレーヤーを初期化します。

   <head>
     <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/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.28.3/aliplayer-min.js"></script>  // 必須。.js ファイルをインポートします。
   </head>

2. プレーヤーのコンテナを指定します。

   <body>
     <div id="J_prismPlayer"></div>
   </body>

3. プレーヤーをインスタンス化します。

   URL からコンテンツをストリーミングするには、source パラメーターをストリーミング URL に設定し、isLive パラメーターを true に設定します。詳細については、「手順 1: インジェスト URL とストリーミング URL を生成する」をご参照ください。

   URL からのストリーミングのサンプルコード：

   <script>
     var player = new Aliplayer({
       id: 'J_prismPlayer',
       source: '<your play URL>', // ApsaraVideo Live で生成されたストリーミング URL。
       isLive: true, // ライブストリームを再生するかどうかを指定します。
       },function(player){
         console.log('プレーヤーが作成されました。')
       });
   </script>

オンライントライアルとデモのソースコード

PC 向けデモ

モバイルデバイス向けデモ

機能関連のデモソースコード

Vue との統合用デモソースコード

Aliplayer SDK は、SDK を Vue フレームワークと統合するためのデモソースコードを提供します。

デモの詳細については、「Vue ベースの Aliplayer のデモ」をご参照ください。

WeChat ミニプログラム

WeChat ミニプログラムには DOM API と BOM API がありません。このため、jQuery や Zepto など、フロントエンド開発で一般的に使用される特定のライブラリを WeChat ミニプログラムにロードすることはできません。同様に、ブラウザーのサポートに依存する Aliplayer SDK は、WeChat ミニプログラムでは実行できません。したがって、動画を再生するには、WeChat ミニプログラムが提供するデフォルトのビデオコンポーネントを使用する必要があります。詳細については、vod-mini-program をご覧ください。

関連ドキュメント

• ApsaraVideo Player SDK for Web を使用する場合、一般的な機能の設定は、プレーヤー、再生方法、またはブラウザ環境によって異なる場合があります。詳細については、「基本機能」をご参照ください。

• ApsaraVideo Player SDK for Web は、再生コントロールや長尺動画の再生などの高度な機能も提供します。詳細については、「高度な機能」をご参照ください。

• ApsaraVideo Player SDK for Web の API リファレンスについては、「Aliplayer API リファレンス」をご参照ください。

• ApsaraVideo Player SDK for Web の FAQ については、「Web 用 Player SDK の FAQ」をご参照ください。