Amazon IVS Player SDK: Video.js 統合 - Amazon Interactive Video Service
開始方法イベントエラープラグインコンテンツセキュリティポリシー関数currentTimedisposedurationgetIVSEventsgetIVSPlayerloadplayplaybackRateseekable

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

Amazon IVS Player SDK: Video.js 統合

このドキュメントは、Amazon Interactive Video Service (IVS) Video.js プレイヤーで利用できる最も重要な機能について説明しています。

Video.js プレイヤー統合の最新バージョン： 1.24.0 (リリースノート )

開始方法

Amazon IVS の Video.js のサポートは、Video.js tech を通じて実装されています。サポートは、スクリプトタグと npm モジュールを介して提供されています。Amazon IVS は、Video.js バージョン 7.6.6 とそれ以降の 7* および 8*をサポートしています。

Video.js のソースオプションはサポートされていませんので、プレイヤーをインスタンス化するときはご注意ください。代わりに、プレイヤーを通常どおりにインスタンス化し、Video.js の src() 関数を呼び出します。自動再生が有効になっていると、ストリームの再生が開始されます。開始されない場合は、play() を使って再生を開始します。

デモ

以下のライブデモでは、Amazon IVS Player Video.js 統合を、当社のコンテンツ配信ネットワークのスクリプトタグと一緒に使用する方法を紹介しています。

スクリプトタグを使ってセットアップする

script タグを使って Amazon IVS tech をセットアップするには

  1. 次のタグを含めます (プレイヤー統合の最新バージョン向け)。

    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>

  2. registerIVSTech 関数を使って tech を登録します。

    registerIVSTech(videojs);

    videojs は、Video.js から提供されたオブジェクトです。

  3. プレイヤーのインスタンスを作成するときは、AmazonIVS を最初の tech として techOrder オプションに追加します。

プレイヤーをインスタンス化するとき、Video.js のソースオプションはサポートされません。代わりに、ソースを設定し、プレイヤーを通常通りインスタンス化して、Video.js の src() 関数を呼び出します。自動再生が有効になっていると、ストリームの再生が開始されます。開始されない場合は、play() を使って再生を開始します。

サンプルコード

以下の例では、PLAYBACK_URL がロードするソースストリームです。この例では、Amazon IVS Player の最新バージョンを使用しています。

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = '';
            
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

NPM でセットアップする

Amazon IVS プレイヤーを npm から使用するには

  1. video.js npm パッケージをインストールするか、自分のプロジェクトに Video.js ライブラリへの他のアクセス方法があることを確認します。

  2. amazon-ivs-player npm パッケージをインストールします。

    npm install amazon-ivs-player

  3. Amazon IVS tech を登録する準備ができたら、registerIVSTech 関数をインポートします。

    import { registerIVSTech } from 'amazon-ivs-player';

  4. registerIVSTech 関数を使って tech を登録します。

    registerIVSTech(videojs, options);

    各パラメータの意味は次のとおりです。

    • videojs が、Video.js から提供されたオブジェクトである。

    • options が、Amazon IVS tech レイヤーのオプションである。サポートされているオプションは次のとおりです。

      • wasmWorker: amazon-ivs-wasmworker.min.js ファイルがホストされている URL。

      • wasmBinary: amazon-ivs-wasmworker.min.wasm ファイルがホストされている URL。

      Worker ファイルは、amazon-ivs-player/dist/ の下の node_modules/ フォルダにあります。IVS プレイヤーを使用するときは、これらをホストする必要があります。

  5. プレイヤーのインスタンスを作成するときは、AmazonIVS を最初の tech として techOrder オプションに追加します。

    const player = videojs('videojs-player', {
    techOrder: ["AmazonIVS"]
});

TypeScript

を使用している場合 TypeScript、npm パッケージには、インポートして使用できる次のタイプが含まれています。

  • VideoJSEvents、getIVSEvents() から返された構造を記述している。

  • VideoJSIVSTech、AmazonIVS tech を使用しているプレイヤーインスタンスのインターフェイスを記述している。これは、@types/video.js npm パッケージが公開している VideoJsPlayer タイプと部分的に重なっている場合があります。

  • TechOptions、registerIVSTech() に送信できる設定オプションを定義するンターフェイスを記述している。

上記タイプの詳細については、「Amazon IVS Player SDK: Web Reference」を参照してください。

イベント

標準の Video.js イベントをリッスンするには、Video.js プレイヤーの on 関数を使用します。

Amazon IVS に固有のイベントをリッスンするには、Amazon IVS Web プレイヤーでイベントリスナーを追加および削除します。

player.getIVSPlayer().addEventListener(event, callback);
player.getIVSPlayer().removeEventListener(event, callback);

この場合、callback はユーザーが定義するコールバックで、event は、PlayerEventType および PlayerState のいずれかです。イベントの詳細については、「Amazon IVS Player SDK: Web Reference」を参照してください。

エラー

Video.js の一般的なエラーについては、プレイヤー上で汎用の error イベントをリッスンします。

player.on("error", callback);

Amazon IVS 固有のエラーについては、Amazon IVS プレイヤーでその固有のエラーをリッスンします。

let playerEvent = player.getIVSEvents().PlayerEventType;
player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback);

コールバックは、次のフィールドを持つオブジェクトを受け取ります。

フィールド 説明

type

エラータイプ。ErrorType イベントに対応しています。詳細については、「Amazon IVS Player SDK: Web Reference」を参照してください。

code

 エラーコードです。

source

 エラーのソース。

message

 人が判読できるエラーメッセージ。

プラグイン

当社は、利用可能な品質のための UI のトグルを作成するプラグインを提供しています。このプラグインを使用するには、次の script タグを通じて当社の tech 使用している場合は、amazon-ivs-quality-plugin.min.js ファイルを含めてロードする必要があります (IVS プレイヤーの最新バージョンの場合)。

<script src="https://player.live-video.net/1.24.0/amazon-ivs-quality-plugin.min.js"></script>

npm を使用している場合は、amazon-ivs-player モジュールから registerIVSQualityPlugin をインポートします。

import { registerIVSQualityPlugin } from 'amazon-ivs-player';

次に、Video.js プレイヤーのインスタンスを作成したら、これを登録して有効にするために次の呼び出しを行います。

registerIVSQualityPlugin(videojs); // where videojs is the video.js variable
player.enableIVSQualityPlugin(); // where player is the instance of the videojs player

これで、ストリームの品質を選択できる UI メニューのボタンが作成されます。

プラグインと TypeScript

を使用している場合 TypeScript、npm パッケージには、プラグインでインポートして使用できるVideoJSQualityPluginタイプが含まれています。プラグインは実質的に mixin であるため、このタイプのインターフェイスは、VideoJSIVSTech TypeScript インターフェイスでは intersection タイプとして使用されます。

コンテンツセキュリティポリシー

Amazon IVS Video.js API は、コンテンツセキュリティポリシー (CSP) を使用しているページで動作するように設定されています。Amazon IVS Player SDK: Web のガイド の「コンテンツセキュリティポリシーの操作」のセクションを参照してください。

関数

再生

Amazon IVS Video.js API は、Video.js フレームワークによる内部使用に必要なインターフェイスをサポートしています。クライアントアプリケーションでは、おそらく、これらのメソッドを直接使用する必要はありません。Video.js が必要な統合を行い、標準のインターフェイスを表示するためです。ただし、必要に応じて内部の Video.js および Amazon IVS プレイヤーメソッドにアクセスするときは、Video.js プレイヤーオブジェクトを使用して必要なオブジェクトハンドルを tech に付与するのが 1 つの方法です。

API にアクセスするには、通常どおり Video.js プレイヤーのインスタンスを取得します。

let player = videojs("videoTagId"); //replace videoTagId with your <video> tag’s id

次に、そのインスタンスで関数を呼び出します。

以下は、Amazon IVS tech レイヤーがオーバーライドする Video.js 関数のサブセットです。Video.js 関数の完全なリストは、video.js API documentation を参照してください。

関数 説明および Amazon IVS 固有の情報

currentTime

時間を取得または設定します (開始から秒単位で)。

Amazon IVS: ライブストリームの現在時刻を設定することは推奨されていません。

dispose

プレイヤーインスタンスを削除する。

Amazon IVS: これにより Amazon IVS tech のバックエンドも削除されます。

duration

動画の再生時間を秒単位で返す。

Amazon IVS: ライブストリームの場合、Infinity を返します。

load

src() データのロードを開始します。

Amazon IVS: これはノーオペレーションです。

play

src コール経由でセットアップされたストリームを再生します。

Amazon IVS: ライブストリームを一時停止した場合、これにより、一時停止した場所からではなく最新のフレームからライブストリームが再開されます。

playbackRate

動画の再生レートを取得または設定します。1.0 は標準速度、0.5 は標準の半分、2.0 は標準の 2 倍、など。

Amazon IVS: ライブストリームでは、1 回の取得で 1 が返され、設定は無視されます。

seekable

シークが可能なメディアの TimeRanges を返します。

Amazon IVS: ライブストリームの場合、戻り値 (TimeRange) で end(0) を 呼び出すと、Infinity が返されます。

Amazon IVS に固有の関数

Amazon IVS Video.js tech には、Amazon IVS の機能に固有の動作にアクセスするための追加の関数があります。

関数 説明

getIVSPlayer

基になる Amazon IVS プレイヤーインスタンスを返します。完全な Amazon IVS Player Web API は、このインスタンスから利用できます。可能な限りベーシックな Video.js 再生 API を使用し、Amazon IVS に固有の機能にアクセスするときはこの関数のみを使用することが推奨されます。Amazon IVS プレイヤーインスタンスでアクセスが必要となる可能性が高い、最も一般的な関数は setQuality() と addEventListener()/removeEventListener() です。

getIVSEvents

Amazon IVS 固有の enum を保持しているオブジェクトを返します。これは、Amazon IVS に固有のエラーをリッスンするために使用されます。詳細については、イベント および エラー を参照してください。

currentTime

時間を取得または設定します (開始から秒単位で)。

Amazon IVS: ライブストリームの現在時刻を設定することは推奨されていません。

署名

currentTime
currentTime(time)

パラメータ

パラメータ Type 説明

time

数値

time がない場合、現在時刻を取得します。time がある場合、動画の再生をその時刻に設定します。

戻り値

Type 説明

number

現在時刻。開始から秒単位で表示します。

dispose

プレイヤーインスタンスを削除します。

Amazon IVS: これにより Amazon IVS tech のバックエンドも削除されます。

署名

dispose()

パラメータ

なし

戻り値

なし

duration

動画の再生時間を秒単位で返す。

Amazon IVS: ライブストリームの場合、Infinity を返します。

署名

duration()

パラメータ

なし

戻り値

Type 説明

number

ストリームの継続時間 (秒単位)。ライブストリームの場合、この値は Infinity です。

getIVSEvents

Amazon IVS 固有の enum を保持しているオブジェクトを返します。これは、Amazon IVS 固有のエラーとイベントをリッスンするために使用されます。詳細については、以下を参照してください。

署名

getIVSEvents()

パラメータ

なし

戻り値

Type 説明

object

PlayerEventType、PlayerState、ErrorType キーを持つオブジェクト。これらは関連する enum にマップされます。

getIVSPlayer

基になる Amazon IVS プレイヤーインスタンスを返します。完全な Amazon IVS Player Web API は、このインスタンスから利用できます。可能な限りベーシックな Video.js 再生 API を使用し、Amazon IVS に固有の機能にアクセスするときはこの関数のみを使用することが推奨されます。Amazon IVS プレイヤーインスタンスでアクセスが必要となる可能性が高い、最も一般的な関数は、setQuality() と addEventListener()/removeEventListener() です。

署名

getIVSPlayer()

パラメータ

なし

戻り値

Type 説明

MediaPlayer

プレイヤーの作成済みインスタンス。

load

src() データのロードを開始します。

Amazon IVS: これはノーオペレーションです。

署名

load()

パラメータ

なし

戻り値

なし

play

src コール経由でセットアップされたストリームを再生します。

Amazon IVS: ライブストリームを一時停止した場合、これにより、一時停止した場所からではなく最新のフレームからライブストリームが再開されます。

署名

play()

パラメータ

なし

戻り値

なし

playbackRate

動画の再生レートを取得または設定します。1.0 は標準速度、0.5 は標準の半分、2.0 は標準の 2 倍、など。

Amazon IVS: ライブストリームでは、1 回の取得で 1 が返され、設定は無視されます。

署名

playbackRate
playbackRate(rate)

パラメータ

パラメータ Type 説明

rate

number

再生レート。有効な値は [0.25, 2.0] の範囲です。

戻り値

Type 説明

number

再生レート。

seekable

シークが可能なメディアの TimeRanges を返します。

Amazon IVS: ライブストリームの場合、戻り値 (TimeRange) で end(0) を 呼び出すと、Infinity が返されます。

署名

seekable()

パラメータ

なし

戻り値

Type 説明

TimeRange

TimeRange シークに使用できるメディアの 。