ApsaraVideo VOD:高度な機能

再生コントロール

自動再生

• autoplay: true を設定しても、自動再生が有効にならない場合があります。これは、最近のほとんどのブラウザが、ユーザー体験を妨げないように、音声付きの自動再生を無効にしているためです。

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

  • ミュート状態での自動再生は常に許可されます。

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

    • ユーザーがクリックやタップなどで Web ページとインタラクションした場合。

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

    • ユーザーがモバイルデバイスのホーム画面にウェブサイトを追加した場合、またはデスクトップデバイスに Progressive Web App (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 を定義するには、エラーイベントをサブスクライブする必要があります。

• プレーヤースキンの設定

  ApsaraVideo Player SDK for Web が提供する UI がビジネス要件を満たせない場合は、CSS ファイルを変更してプレーヤースキンをカスタマイズできます。

  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 () { } 
  );

ビデオスナップショット

ApsaraVideo Player SDK for Web V2.1.0 以降では、動画再生中のスナップショットキャプチャがサポートされています。出力形式は 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)

snapshoted イベントのサブスクライブ

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 ストリームのアダプティブビットレートストリーミング

マルチビットレートストリーミングを有効にするには、source パラメーターをマスタープレイリストの URL に設定し、isVBR パラメーターを true に設定します。この機能により、プレーヤーはネットワークの状態に応じてビデオ品質レベルを自動的に切り替えることができます。ユーザーは手動で品質を切り替えることもできます。

再生 URL の取得

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

varplayer = newAliplayer({
 "id":"player-con",
 "source":"マルチビットレート再生 URL",
 "isVBR":true,
 },
 function () { } 
);

プレーヤーの設定メニューには [品質] オプションが表示され、[自動 (360)] などをクリックしてビデオ品質を切り替えることができます。

外部字幕の設定

// 字幕言語を切り替えます。
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // 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 のネイティブ字幕レンダリングは背景色をサポートしていません。*/
  }

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

ApsaraVideo Player SDK for Web では手動での設定は不要です。次の図は、オーディオトラックの設定を示しています。

多言語対応

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

language 属性の使用上の注意

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) {}
);

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

中国語と英語以外の言語をサポートする必要がある場合は、カスタム言語機能を使用できます。これを行うには、languageTexts 属性を使用して言語リソースを指定します。languageTexts 属性はオブジェクトリテラルで、language 属性の値がキーとなり、JSON 値が指定された言語の翻訳済みリソースコンテンツになります。次のコードに例を示します。

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

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

ApsaraVideo Player SDK for Web を使用すると、中国 (上海)、ドイツ (フランクフルト)、シンガポールの各リージョンに保存されている動画を再生できます。動画 ID と再生認証情報を使用するか、Security Token Service (STS) を使用して動画を再生できます。プレーヤーはリージョン情報を解析し、対応するリージョンにある動画の再生 URL を取得します。

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

• STS ベースの再生：region プロパティを使用して動画のリージョンを指定します。デフォルト値は 'cn-shanghai' です。その他の有効な値には、eu-central-1 と ap-southeast-1 があります。例：

  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 動画の再生

注意事項

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

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

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

  項目	説明
  環境要件	プレーヤーは AJAX range リクエストを送信してビデオリソースにアクセスします。ご利用のブラウザは次の要件を満たす必要があります。 HTTP Range リクエストをサポートしていること。詳細については、「HTTP range requests」をご参照ください。 OPTIONS メソッドをサポートしていること。Firefox などのブラウザは、range ヘッダー付きの 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 以降

ApsaraVideo Player SDK for Web の統合

<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 - 現在の再生速度。
    // このイベントは、decodedFps < (fps * playbackRate) が 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) {
      // ソースを H.264 フォールバックビデオ URL に設定します。
      _options.source = '//h264.mp4';
      // コーデック検出をスキップするために enableH265 を無効にします。
      _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) {
      // ソースを H.264 フォールバックビデオ URL に設定します。
      _options.source = '//h264.mp4';
      // コーデック検出をスキップするために enableH266 を無効にします。
      _options.enableH266 = false;
      createPlayer(_options);
  }
  // プレーヤーを初期化します
  var options = {
    id: "player-con",
    source: "//h266.mp4",
    enableH266: true
  }
  createPlayer(options)

API

ApsaraVideo Player SDK for Web でサポートされている属性、メソッド、イベント、および対応する説明と例の詳細については、「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

> self.crossOriginIsolated
< true
> SharedArrayBuffer
< ƒ SharedArrayBuffer() { [native code] }

[TEST LOG] [H265PlayInfo]
{
  codecTag: "hvc1",
  renderType: "wasm",
  simd: true,
  simdOption: true,
  wasmThreads: true,
  wasmThreadsOption: true
}

タイムシフト

• タイムシフトの有効化

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

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

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

• タイムシフト UI

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

  説明

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

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

  再生中に、liveShiftService.setLiveTimeRange メソッドを呼び出して、ライブストリームの開始時刻と終了時刻を調整できます。UI はそれに応じて更新されます。例：

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

• ライブストリーミングには FLV、タイムシフトには HLS

  遅延を減らすために、ライブストリーミングには FLV を、タイムシフトには HLS を使用することをお勧めします。

  ApsaraVideo Player SDK for Web の設定：

  • 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 のリソースをダウンロードします。

   aliplayer-min.js と aliplayer-min.css の 2 つのメインファイルに加えて、ApsaraVideo Player SDK for Web は他のリソースファイルも動的に参照します。したがって、まず完全なリソースフォルダを取得する必要があります。

   ダウンロードリンク：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 のカスタマイズ

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