ApsaraVideo VOD:高度な機能

再生制御

自動再生

• autoplay: true を構成した後、自動再生が有効にならない場合があります。 これは、ほとんどの最新のブラウザでは、ユーザーエクスペリエンスを妨げないように、音声付きの自動再生が無効になっているためです。

  たとえば、Chrome の自動再生ポリシーは次のとおりです。

  • 常に自動再生を許可し、ミュートにする

  • 音声付きの自動再生は、次のシナリオで許可されます。

    • ユーザーがクリックまたはタップするなど、Web ページを操作した場合。

    • Web サイトでのユーザーのビデオ視聴行動がしきい値を超えた場合。 たとえば、ユーザーが Web サイトで頻繁にビデオを視聴する場合、Chrome はその Web サイトで音声付きの自動再生を許可します。 これは Chrome の内部ポリシーであり、プログラムによって干渉することはできません。

    • ユーザーがモバイルデバイスのホーム画面に Web サイトを追加した場合、またはデスクトップデバイスにプログレッシブ Web アプリ (PWA) をインストールした場合。

  このような場合は、次のことができます。

  • mute:true を構成して、自動再生をミュートにします。 詳細については、「API 操作」をご参照ください。

  • autoplayPolicy: { fallbackToMute: true } を構成して、最初に音声付きの自動再生を有効にします。 音声付きの自動再生が失敗した場合、ミュート自動再生が有効になります。 詳細については、「API 操作」をご参照ください。

  WeChat ブラウザなどの一部のブラウザでは、ミュート自動再生も無効になる場合があるため、すべての状況で自動再生が成功することを保証することはできません。

  ブラウザの自動再生ポリシーの詳細については、Chrome および Safari のドキュメントを参照してください。

連続再生

プレーヤーの外観とコンポーネントのカスタマイズ

ApsaraVideo Player SDK for Web を使用すると、プレーヤースキンなどのプレーヤーの外観をカスタマイズし、プレーヤーのコンポーネントと各コンポーネントの表示領域を表示するかどうかを指定できます。 これらのコンポーネントには、コントロールバーとエラー UI が含まれます。

• コントロールバーの UI コンポーネント

  skinLayout 属性を設定することにより、UI コンポーネントと各コンポーネントの表示領域を表示するかどうかを指定できます。 詳細については、「skinLayout の構成」をご参照ください。

  • ApsaraVideo Player SDK のデフォルト構成

    skinLayout:[
       {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
        {name: "H5Loading", align: "cc"},
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        {name: "infoDisplay"},
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
          name: "controlBar", align: "blabs", x: 0, y: 0,
          children: [
            {name: "progress", align: "blabs", x: 0, y: 44},
            {name: "playButton", align: "tl", x: 15, y: 12},
            {name: "timeDisplay", align: "tl", x: 10, y: 7},
            {name: "fullScreenButton", align: "tr", x: 10, y: 12},
            {name:"subtitle", align:"tr",x:15, y:12},
            {name:"setting", align:"tr",x:15, y:12},
            {name: "volume", align: "tr", x: 5, y: 10}
          ]
        }
      ]

• エラー UI

  ApsaraVideo Player SDK for Web は、デフォルトのエラー UI を提供します。また、次のいずれかの方法を使用して、エラー UI をカスタマイズすることもできます。詳細については、「HTML5 プレーヤーのエラー UI をカスタマイズする」をご参照ください。

  • デフォルトのエラー UI の CSS ファイルを変更する

    デフォルトのエラー UI に基づいて、エラー UI をカスタマイズできます。 CSS ファイルを変更して、背景色、フォント、位置を変更し、エラーメッセージを表示するかどうかを指定できます。

  • 新しいエラー UI を定義する

    新しいエラー UI を定義するには、エラー イベントをサブスクライブする必要があります。

• プレーヤースキンを構成する

  エラー UI

  Web プレーヤー スキン設定

  説明

  構成の詳細については、プレーヤーの CSS ファイル aliplayer-min.css をご参照ください。次のサンプルコードは、大きな再生ボタンを構成する方法の例を示しています。詳細については、「プレーヤースキンを構成する」をご参照ください。

  .prism-player .prism-big-play-btn {
    width: 90px;
    height: 90px;
    background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
  }

動画のサムネイルをカスタマイズする

ApsaraVideo VOD にアップロードする各動画にはサムネイルがあります。ApsaraVideo VOD では、サムネイルを変更するための複数のメソッドが用意されています。動画をアップロードする前に、イメージまたはビデオスナップショットをサムネイルとして指定できます。動画のアップロード後にサムネイルを変更できます。次のいずれかのメソッドを使用して、動画のサムネイルをカスタマイズできます。

• ApsaraVideo VOD コンソールで動画サムネイルを設定します。詳細については、「動画サムネイルを設定する」をご参照ください。

• プレーヤーの cover 属性を設定することで、動画サムネイルを設定します。

  var player = new Aliplayer({
   "id": "player-con",
   "source":"//player.alicdn.com/video/aliyunm****.mp4",
    "cover":"サムネイル URL",
  },
   function () { } 
  );

ビデオ スナップショット

V2.1.0 以降のバージョンの ApsaraVideo Player SDK for Web では、再生中にスナップショットをキャプチャできます。キャプチャされたスナップショットは、image または jpeg タイプです。スナップショット機能は個別に有効にする必要があります。スナップショットがキャプチャされると、プレーヤーはスナップショットの Base64 エンコードされたバイナリイメージデータと、ソースビデオからスナップショットがキャプチャされた再生位置を返します。

スナップショット機能を有効にする

• Web プレーヤーでスナップショット機能を有効にします

  重要

  Safari で再生される Flash Video (FLV) ビデオからスナップショットをキャプチャすることはできません。スナップショット機能を有効にしても、スナップショット [ボタン] は表示されません。Canvas は、Web プレーヤーのスナップショット機能を有効にする要素です。再生ドメインのオリジン間リソース共有 (CORS) を許可するヘッダーを追加する必要があります。詳細については、「CORS を構成する」をご参照ください。

  スナップショット UI の設定を skinLayout 属性に追加します。サンプルコード:

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        name: "H5Loading", align: "cc"
      },
      {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
      {name: "infoDisplay"},
      {name:"tooltip", align:"blabs",x: 0, y: 56},
      {name: "thumbnail"},
      {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 15, y: 10},
          {name: "snapshot", align: "tr", x: 5, y: 12},
        ]
      }
    ]

  Web プレーヤーのスナップショット機能を有効にするには、crossOrigin を anonymous に設定して、匿名のクロスオリジンリクエストを許可する必要があります。サンプルコード:

    extraInfo:{
      crossOrigin:"anonymous"
    }

スナップショットのサイズと画質を設定する

// スナップショットの幅を 300 、高さを 200 、品質を 0.9 に設定します。
// スナップショットの高さはピクセル単位で表示されます。スナップショットの品質は 0 ～ 1 の範囲で設定できます。デフォルト値は 1 です。
player.setSanpshotProperties(300,200,0.9)

スナップショットされたイベントをサブスクライブする

player.on("snapshoted", function(data) {
     console.log(data.paramData.time);
     console.log(data.paramData.base64);
     console.log(data.paramData.binary);
 });

スナップショット ウォーターマーク

snapshotWatermark:{
    left:"100",
    top:"100",
    text:"test",
    font:"italic bold 48px SimSun",
    strokeColor:"red",
    fillColor:'green'
  }

const player = new Aliplayer({
  id: "player-con",
  disableSeek: true,
  source: "https://player.alicdn.com/video/aliyunmedia.mp4",
}, function (player) {
    console.log("The player is created");
  }
);

長い動画の機能

HLS ストリームの適応ビットレートストリーミング

複数のビットレートで動画を再生するには、ソースパラメーターをマルチビットレート再生 URL（マスタープレイリストと呼ばれます）に設定する必要があります。isVBR パラメーターも true に設定する必要があります。適応ビットレートストリーミングは、ネットワークの状態に基づいて動画の品質を調整します。ビジネス要件に基づいて、動画の品質を手動で調整することもできます。

再生 URL を取得する

複数のビットレートで動画の再生 URL を取得します： player._hls.levels[player._hls.currentLevel]。

var player = new Aliplayer({
 "id":"player-con",
 "source":"Multi-bitrate playback URL",
 "isVBR":true,
 },
 function () { } 
);

次の図は、動画の品質設定を示しています。

外部字幕を構成する

// 字幕の言語を変更します。
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // UI 要素は自動的に更新されません。 API 操作を呼び出して UI 要素を更新できます。

// 字幕をオンにします。
var result = player._ccService.open();
player._ccService.updateUI(result.language);

// 字幕をオフにします。
player._ccService.close();
player._ccService.updateUI();

  .prism-cue > div:first-child,
  video::cue {
    font-size: 14px !important;
    color: #000 !important;
    background-color: rgba(255, 255, 255, .8) !important; /* iOS のネイティブ字幕レンダリングは背景色をサポートしていません。 */
  }

複数のオーディオトラック

Web 用 ApsaraVideo Player SDK では、手動構成は必要ありません。次の図は、オーディオトラックの設定を示しています。

複数言語

デフォルトでは、Web 用 ApsaraVideo Player SDK は中国語と英語をサポートしており、ブラウザの言語設定に基づいて中国語と英語を自動的に切り替えます。Web 用 ApsaraVideo Player SDK を使用すると、カスタム言語を指定できます。Web 用 ApsaraVideo Player SDK を使用すると、ApsaraVideo VOD が利用可能な複数のリージョンで動画を再生できます。動画 ID と再生クレデンシャルに基づいて、東南アジアとヨーロッパのリージョンに保存されている動画を再生できます。

言語属性の使用上の注意

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("The player is created.");
  });

英語の UI 要素でプレーヤーを作成する

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "en-us" // zh-cn は中国語を示します。 en-us は英語を示します。
 },
 function (player) {}
);

プレーヤーのカスタム言語を指定する

プレーヤーが中国語と英語以外の言語の UI リソースをサポートするようにするには、languageTexts 属性を指定する必要があります。languageTexts には、キーと値のペアのリストが含まれています。language 属性の値はキーを指定し、JSON 値は指定された言語に翻訳される UI リソースを指定します。サンプルコード：

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// STRING 型で言語を指定します。
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // その他のパラメーター。詳細については、https://player.alicdn.com/lang.json? spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json を参照してください。
            }
        }
    },
    function (player) {} 
);

複数のリージョンに保存されているビデオリソースを再生する

Web 用 ApsaraVideo Player SDK を使用すると、中国（上海）、ドイツ（フランクフルト）、シンガポールのリージョンに保存されている動画を再生できます。動画 ID と再生クレデンシャルを使用するか、セキュリティトークンサービス（STS）を使用して動画を再生できます。プレーヤーはリージョン情報を解析し、対応するリージョンの動画の再生 URL を取得します。

• 動画 ID と再生クレデンシャルに基づく再生：プレーヤーは再生クレデンシャルからリージョン情報を解析して、動画の再生 URL を取得します。この場合、構成でリージョンを指定する必要はありません。

• STS ベースの再生：region 属性を設定することで、再生する動画が存在するリージョンを指定できます。region 属性の有効な値：cn-shanghai、eu-central-1、ap-southeast-1。デフォルト値：cn-shanghai。サンプルコード：

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// 一時的な STS トークンが発行されたときに生成される AccessKey ID。
      securityToken: '',// 一時的な STS トークン。 STS トークンを生成するには、AssumeRole 操作を呼び出します。
      accessKeySecret: ''// 一時的な STS トークンが発行されたときに生成される AccessKey ID。
      region:'eu-central-1',// ドイツ（フランクフルト）リージョン。
    }, function (player) {
      console.log("The player is created.");
    });

H.265 および H.266 ビデオの再生

使用上の注意

• Web V2.14.0 以降向け ApsaraVideo Player SDK は H.265 ビデオの再生をサポートし、Web V2.20.2 以降向け ApsaraVideo Player SDK は H.266 ビデオの再生をサポートします。H.265 ビデオを再生するには、ライセンスを申請し、「Web での H.265 ビデオの再生」付加価値サービス (VAS) を購入します。詳細については、「ライセンスの管理」をご参照ください。

• Web 向け ApsaraVideo Player SDK を使用して再生できる H.265 および H.266 オーディオおよびビデオファイルの形式の詳細については、「サポートされているプロトコル」をご参照ください。

• H.265 および H.266 ビデオを再生する前に、次の表に記載されている要件に注意してください。

  項目	説明
  環境要件	プレーヤーは AJAX レンジリクエストを送信してビデオリソースにアクセスします。ブラウザは次の要件を満たしている必要があります。 HTTP レンジリクエストをサポートします。詳細については、「HTTP レンジリクエスト」をご参照ください。 OPTIONS メソッドをサポートします。Firefox などのブラウザは、レンジヘッダー付きの AJAX リクエストを送信する前に、まず HTTP OPTIONS リクエストを送信します。
  互換性	H.265 iOS 11 以降を実行しているデバイスは、H.265 ビデオの再生をサポートしています。 Android デバイスの特定のブラウザ (組み込みブラウザ、WeChat ブラウザ、UC ブラウザ、QQ ブラウザなど) は、H.265 ビデオのハードウェアデコードをサポートしています。 Chrome、Microsoft Edge、Firefox などのブラウザでの H.265 ビデオのソフトウェアデコードのサポートは、ブラウザが WebAssembly API をサポートしているかどうかによって異なります。詳細については、WebAssembly にアクセスしてください。デバイスで Chrome または Chromium を使用している場合は、Chrome または Chromium を V74 以降に更新してください。V74 より前のバージョンの Chrome および Chromium では、WebAssembly は期待どおりに動作しません。 H.266 H.266 ビデオの再生をネイティブにサポートしているブラウザはありません。この場合、ブラウザで H.266 ビデオを再生するには、ソフトウェアデコードが必要です。ブラウザでの H.266 ビデオのソフトウェアデコードのサポートは、ブラウザが WebAssembly API をサポートしているかどうかによって異なります。詳細については、WebAssembly にアクセスしてください。デバイスで Chrome または Chromium を使用している場合は、Chrome または Chromium を V74 以降に更新してください。V74 より前のバージョンの Chrome および Chromium では、WebAssembly は期待どおりに動作しません。 iOS 16.4 以前を実行しているデバイスと、ほとんどの中低価格帯の Android デバイスは、H.266 ビデオのソフトウェアデコードをサポートしていません。
  ソフトウェアデコードのパフォーマンス	H.265 PC のブラウザを使用して、2K 以下の解像度のビデオをマルチスレッドプロセスで再生し、1080p 以下の解像度のビデオをシングルスレッドプロセスで再生できます。ビデオのフレームレートは 30 フレーム/秒 (FPS) を超えることはできません。 モバイルデバイスのブラウザを使用して、720p 以下の解像度のビデオをシングルスレッドプロセスで再生できます。ビデオのフレームレートは 30 FPS を超えることはできません。モバイルデバイスのソフトウェアデコードのパフォーマンスは、デバイスのチップパフォーマンスによって異なります。次の項目では、シングルスレッドプロセスでのビデオのソフトウェアデコードをサポートするチップについて説明します。ビデオは 720p で、ビデオの FPS は 30 です。 Snapdragon 855 以降 Kirin 820 以降 Tianjic 800 以降 H.266 PC のブラウザを使用して、1080p 以下の解像度のビデオをマルチスレッドプロセスで再生し、720p 以下の解像度のビデオをシングルスレッドプロセスで再生できます。ビデオのフレームレートは 30 FPS を超えることはできません。 モバイルデバイスのブラウザを使用して、720p 以下の解像度のビデオをシングルスレッドプロセスで再生できます。ビデオのフレームレートは 30 FPS を超えることはできません。モバイルデバイスのソフトウェアデコードのパフォーマンスは、デバイスのチップパフォーマンスによって異なります。次の項目では、シングルスレッドプロセスでのビデオのソフトウェアデコードをサポートするチップについて説明します。ビデオは 720p で、ビデオの FPS は 30 です。 Snapdragon 855 以降 Kirin 820 以降

Web 向け ApsaraVideo Player SDK の統合

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h265/test_480p_mp4_h265.mp4",
  enableH265: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

<div class="prism-player" id="player-con"></div>
<script>
var options = {
  id: "player-con",
  source: "//demo.example.com/video/test/h266/test_480p_mp4_h266.mp4",
  enableH266: true,
  license: {
    domain: "example.com",
    key: "example-key"
  }
}
var player = new Aliplayer(options);
</script>

{
  //... 他のパラメーターを設定します。
  source: JSON.stringify({
      FD: '//h265_fd.mp4',
      HD: '//h265_hd.mp4'
    }),
}

デコード方法の選択

再生にダウングレードされたプロトコルを使用する

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // ブラウザで API 操作がサポートされていない場合、またはビデオデコードに失敗した場合は、ユーザーに通知するか、ダウングレードされたプロトコルを使用して再生します。
    }
});

player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps は、ソフトウェアデコードによってデコードされる 1 秒あたりのフレーム数を指定します。
    // data.fps は、現在のビデオのフレームレートを指定します。
    // data.playbackRate は、現在の再生速度を指定します。
    // data.fps と data.playbackRate の積が data.decodedFps よりも 5 秒以上大きい場合、このイベントがトリガーされます。この場合、再生中に途切れが発生する可能性があります。ユーザーに通知するか、ダウングレードされたプロトコルを使用して再生する必要があります。
});
                            

  var player;

  // プレーヤーを作成します。
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    player.on('h265DecoderOverload', () => {
      // デコードでもエラーイベントがトリガーされる可能性があるため、2 つの連続したエラーイベントがトリガーされた後にダウングレードされたプロトコルを使用して再生することをお勧めします。
      fallbackTo264(_options)
    })
    return player;
  }

  // ダウングレードロジックを設定します。
  function fallbackTo264(_options) {
      // source パラメーターに H.264 ビデオの再生 URL を指定します。
      _options.source = '//h264.mp4';
      // enableH265 を false に設定して、コーデックスニッフィングを無効にします。
      _options.enableH265 = false;
      createPlayer(_options);
  }

  // プレーヤーを初期化します。
  var options = {
    id: "player-con",
    source: "//h265.mp4",
    enableH265: true
  }
  createPlayer(options)

player.on('error', (e) => {
        var code = String(e.paramData.error_code);
    if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
      // ブラウザで API 操作がサポートされていない場合、またはビデオデコードに失敗した場合は、ユーザーに通知するか、ダウングレードされたプロトコルを使用して再生します。
    }
});          

  var player;

  // プレーヤーを作成します。
  function createPlayer(_options) {
    player && player.dispose();
    player = new Aliplayer(_options);
    player.on('error', (e) => {
      var code = String(e.paramData.error_code);
      if (['4300', '4301', '4302', '4303', '4304'].indexOf(code) > -1) {
        fallbackTo264(_options)
      }
    });
    return player;
  }

  // ダウングレードロジックを設定します。
  function fallbackTo264(_options) {
      // source パラメーターに H.264 ビデオの再生 URL を指定します。
      _options.source = '//h264.mp4';
      // enableH266 を false に設定して、コーデックスニッフィングを無効にします。
      _options.enableH266 = false;
      createPlayer(_options);
  }

  // プレーヤーを初期化します。
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

Web 向け ApsaraVideo Player SDK でサポートされている属性、メソッド、イベント、および対応する説明と例の詳細については、「API 操作」をご参照ください。次のセクションでは、H.265 および H.266 ビデオでサポートされている属性、メソッド、イベントについて説明します。

• サポートされている属性

  source、autoplay、rePlay、preload、cover、width、height、skinLayout、waitingTimeout、vodRetry、keyShortCuts、keyFastForwardStep

• サポートされているメソッド

  play、pause、replay、seek、dispose、getCurrentTime、getDuration、getVolume、setVolume、loadByUrl、setPlayerSize、setSpeed、setSanpshotProperties、fullscreenService、getStatus、setRotate、getRotate、setImage、setCover、setProgressMarkers、setPreviewTime、getPreviewTime、isPreview

• サポートされているイベント

  ready、play、pause、canplay、playing、ended、hideBar、showBar、waiting、timeupdate、snapshoted、requestFullScreen、cancelFullScreen、error、startSeek、completeSeek、h265PlayInfo、h266PlayInfo

  説明

  h265PlayInfo および h266PlayInfo コールバックは、H.265 または H.266 ビデオに使用される再生方法を返します。renderType は再生方法を示し、simd は SIMD 処理を示し、wasmThreads はマルチスレッド処理を示します。

エラーコード

次の表に、H.265 および H.266 再生エラーで返される可能性のあるエラーコードを示します。その他のエラーコードの詳細については、「API 操作」をご参照ください。

マルチスレッド処理の有効化

例

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

タイムシフト

• タイムシフトの有効化

  • ApsaraVideo Live でタイムシフト機能を有効にする必要があります。詳細については、「タイムシフト」をご参照ください。

  • 次の表は、プレーヤーでタイムシフトを有効にするために設定する必要がある属性について説明しています。

    属性	説明
    isLive	値を true に設定します。
    liveTimeShiftUrl	タイムシフト情報を照会するために使用される URL です。
    liveStartTime	ライブストリーミングの開始時刻です。
    liveOverTime	ライブストリーミングの終了時刻です。
    liveShiftSource	タイムシフト用の HLS URL です。 説明 この属性は、FLV ライブストリームの場合にのみ必要です。
    liveShiftMinOffset	タイムシフト中に TS セグメントを生成するには、特定の期間が必要です。現在のライブストリーミング時間に非常に近い位置にシークすると、TS セグメントが生成されず、404 エラーが報告されます。シーク位置と現在のライブストリーミング時間の間には、最小期間を指定する必要があります。このパラメーターを設定して、期間を秒単位で指定できます。デフォルト値：30。セグメントは 10 秒ごとに生成されます。これにより、少なくとも 3 つのセグメントが存在することが保証されます。

• タイムシフト UI

  タイムシフト UI は主にプログレスバーで、タイムシフトをサポートする領域に時間を表示します。

  説明

  時間領域には、現在の再生時間、ライブストリーミングの終了時間、現在のライブストリーミング時間が左から右に表示されます。

• ライブストリーミングの終了時刻の変更

  liveShiftSerivce.setLiveTimeRange メソッドを呼び出して、ライブストリーミングの開始時刻と終了時刻を変更できます。開始時刻または終了時刻が変更されると、UI が変更されます。サンプルコード：

  player.liveShiftSerivce.setLiveTimeRange(""'2018/01/04 20:00:00')

• ライブストリーミング用の FLV とタイムシフト用の HLS

  待機時間を短縮するために、ライブストリーミングには FLV を、タイムシフトには HLS を使用することをお勧めします。

  Web 用 ApsaraVideo Player SDK の構成：

  • source：FLV 形式のライブストリームの URL です。

  • liveShiftSource：HLS 形式のタイムシフトストリームの URL です。

  サンプルコード：

  {
   source:'http://localhost/live****/example.flv',
   liveShiftSource:'http://localhost/live****/example.m3u8',
  }

デプロイメントのカスタマイズ

デフォルトでは、JavaScript や CSS ファイルなどの ApsaraVideo VOD のリソースは Alibaba Cloud CDN に保存されます。これらのリソースをサーバーにデプロイするには、次の手順を実行します。

1. ApsaraVideo Player SDK のリソースをダウンロードします。

   ApsaraVideo Player は aliplayer-min.js ファイルと aliplayer-min.css ファイル以外のリソースファイルを動的に参照するため、完全なリソースパッケージを取得する必要があります。

   ダウンロードリンク: apsara-media-box-imp-web-player-dist.tar.gz

2. パッケージを解凍し、ファイルをデプロイします。

   リソースパッケージを解凍し、フォルダ内のすべてのファイルをサーバーにデプロイします。ファイルのディレクトリレベルが変更されていないことを確認してください。

3. カスタムパスでプレーヤーを初期化します。

   次のサンプルコードは、カスタムデプロイメントの CSS ファイルと JavaScript ファイルの URL の例を示しています。

   https://player.alicdn.com/assets/skins/default/aliplayer-min.css
   https://player.alicdn.com/assets/aliplayer-min.js

   プレーヤーを初期化するには、次の手順を実行します。

   1. ページの上部にある CSS ファイルと JavaScript ファイルの URL を参照します。

      <head>
        <link rel="stylesheet" href="https://player.alicdn.com/assets/skins/default/aliplayer-min.css" />
        <script charset="utf-8" type="text/javascript" src="https://player.alicdn.com/assets/aliplayer-min.js"></script>
      </head>

   2. プレーヤーを初期化し、assetPrefix パラメーターを指定します。

      assetPrefix パラメーターは、カスタムパスのプレフィックスを指定します。プレーヤーで HLS ビデオを再生する場合、システムは https://player.alicdn.com/assets/hls/aliplayer-hls2-min.js ファイルを動的に参照します。ファイルのパスが正しいことを確認してください。

      new Aliplayer({
        assetPrefix: 'https://player.alicdn.com/assets'
        // その他のパラメーターを指定します。
      })

関連情報

• コンポーネント

• API 操作

• ApsaraVideo Player SDK for Web に関するよくある質問

• コンポーネントのカスタマイズ

• HTML5 プレーヤーのエラー UI のカスタマイズ

• エラー処理とライブストリーミングの再開