ApsaraVideo VOD:高度な機能

再生コントロール

自動再生

• 自動再生を true に設定してもビデオが自動的に再生されない場合、これは一般的な問題です。最近のほとんどのブラウザは、ユーザーへの迷惑を避けるために、音声付きの自動再生をブロックします。

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

  • ミュートされた自動再生は常に許可されます。

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

    • ユーザーがクリックやタップなどでウェブページを操作した場合。

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

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

  これに対処するには、次の操作を実行できます。

  • mute を true に設定して、音声をミュートした状態で自動再生を有効にします。詳細については、「Aliplayer API リファレンス」をご参照ください。

  • `autoplayPolicy: { fallbackToMute: true }` を設定して、まず音声付きでの再生を試みます。失敗した場合、プレーヤーは音声をミュートして再生を試みます。詳細については、「Aliplayer API リファレンス」をご参照ください。

  WeChat のブラウザなど、一部のブラウザではミュートされた自動再生もブロックされる場合があることにご注意ください。したがって、自動再生がすべての場合で機能するとは限りません。

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

連続再生

プレーヤースキンとコントロールのカスタマイズ

ウェブプレーヤー SDK を使用すると、プレーヤースキンをカスタマイズし、コントロールバーやエラー UI などのコンポーネントの表示と位置を制御できます。

• プレーヤーコントロールバー UI

  skinLayout プロパティを変更して、表示するコンポーネントとその位置をカスタマイズできます。詳細については、「skinLayout プロパティの設定」をご参照ください。

  • ApsaraVideo VOD のデフォルト構成

    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

  ウェブプレーヤー SDK は、デフォルトのエラー UI と、それをカスタマイズするための 2 つの方法を提供します。詳細については、「H5 でのエラー UI のカスタマイズ」をご参照ください。

  • CSS を使用したスキンのカスタマイズ

    プレーヤーの元のレイアウトと表示を維持しつつ、CSS を書き換えることで、背景色、可視性、フォント、位置などの属性を変更してスキンをカスタマイズできます。

  • UI の再書き込み

    UI を再書き込みするには、エラーイベントをサブスクライブする必要があります。

• ウェブプレーヤー SDK スキン

  デフォルトのウェブプレーヤー SDK の UI が要件を満たさない場合は、プレーヤーの CSS スタイルを設定してカスタムスキンを指定できます。

  ウェブプレーヤースキンの設定

  説明

  詳細については、プレーヤーの 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 コンソールでサムネイルを設定します。詳細については、「ビデオサムネイルの設定」をご参照ください。

• プレーヤーの cover プロパティを使用してサムネイルを設定します。

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

ビデオスクリーンショット

ウェブプレーヤー SDK V2.1.0 以降では、ビデオ再生中にスクリーンショットを撮ることができます。キャプチャされた画像は image または jpeg タイプです。スクリーンショット機能は別途有効にする必要があります。スクリーンショットから返されるデータには、現在の再生時間、および base64 とバイナリ形式の画像が含まれます。

スクリーンショット機能の有効化

• ウェブプレーヤーでスクリーンショット機能を有効にする

  重要

  Safari ブラウザでは、FLV ビデオのスクリーンショット機能はサポートされていません。有効にしてもスクリーンショットボタンは表示されません。また、ウェブプレーヤー SDK は Canvas を使用してスクリーンショットを撮るため、再生ドメイン名にクロスドメインアクセスのヘッダーを追加する必要があります。詳細については、「クロスドメインアクセスの設定」をご参照ください。

  skinLayout 配列にスナップショット UI を追加できます。次のコード例を示します。

      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},
        ]
      }
    ]

  ウェブプレーヤー SDK でスクリーンショットを撮るには、ビデオのクロスオリジン属性を匿名クロスドメインアクセスを許可するように設定する必要があります。次のコード例を示します。

    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:"テストウォーターマーク",
    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("プレーヤーが作成されました");
  }
);

長時間ビデオのシナリオ

HLS のアダプティブビットレート切り替え

アダプティブビットレートストリーミングでは、マルチビットレート URL (マスタープレイリスト) を `source` パラメーターに渡し、isVBR:true を設定します。アダプティブビットレートストリーミングは、ネットワーク環境に基づいてビデオ解像度の自動および手動切り替えをサポートします。

現在の再生 URL の取得

アダプティブビットレート：player._hls.levels[player._hls.currentLevel]

varplayer = newAliplayer({
 "id":"player-con",
 "source":"アダプティブビットレート URL",
 "isVBR":true,
 },
 function () { } 
);

次の図に結果を示します。

外部字幕

// 字幕の切り替え
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 の字幕レンダリングは背景色をサポートしていません */
  }

マルチオーディオトラック

プレーヤーに追加の設定は必要ありません。次の図に結果を示します。

多言語

ウェブプレーヤー SDK は、デフォルトで中国語と英語をサポートし、ブラウザの言語設定に基づいて中国語または英語のリソースを自動的に有効にします。これら 2 つの言語に加えて、SDK ではカスタム言語を定義することもできます。ウェブプレーヤー SDK は、ApsaraVideo VOD の多地域再生もサポートしています。これにより、東南アジアやヨーロッパなどのリージョンからのビデオソースの Vid+PlayAuth 再生が可能になります。

言語設定プロパティ

var player = new Aliplayer({
    id: "player-con",
    source: "",
    width: "100%",
    height: "500px",
    autoplay: true,
    language: "en-us",
  }, function (player) {
    console.log("プレーヤーが正常に作成されました");
  });

プレーヤーの英語版

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",// 自分で名前を付けます。文字列で問題ありません
"languageTexts":{
    "CustomLanguage":{
        "Pasue":"CustomLanguage Pause"
        // 他のプレーヤーフィールドについては、https://player.alicdn.com/lang.json?spm=a2c4g.11186623.0.0.5a746515vnwUSi&file=lang.json をご参照ください
            }
        }
    },
    function (player) {} 
);

多地域再生のサポート

ApsaraVideo VOD は、上海、フランクフルト、シンガポールの各リージョンで利用できます。ウェブプレーヤー SDK の Vid+PlayAuth および STS 再生方式は、多地域再生をサポートしています。プレーヤーがユーザーが再生したいビデオのリージョンを判断すると、そのリージョンの ApsaraVideo VOD サービスを呼び出してビデオの再生 URL を取得します。

• Vid+PlayAuth 再生：プレーヤーは playauth からリージョンを解析し、対応するリージョンからビデオを取得します。したがって、再生のためにリージョンを指定する必要はありません。

• STS 再生：プレーヤーの Region プロパティを使用して、再生するビデオのリージョンを指定できます。Region のデフォルト値は 'cn-shanghai' です。その他の有効な値は `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。STS トークン生成時に返されます。
      securityToken: '',// STS トークン。STS サービスの AssumeRole API を呼び出して生成する必要があります。
      accessKeySecret: ''// 一時的な STS トークンの AccessKey Secret。STS トークン生成時に返されます。
      region:'eu-central-1',// ドイツ (フランクフルト) リージョン
    }, function (player) {
      console.log("プレーヤーが正常に作成されました");
    });

H.265/H.266 エンコードされたビデオストリームの再生

前提条件

• ウェブプレーヤー SDK は、V2.14.0 から H.265 エンコードビデオストリームの再生を、V2.20.2 から H.266 エンコードビデオストリームの再生をサポートしています。この機能を使用するには、ライセンスを申請し、ウェブプレーヤー SDK の H.265 再生付加価値サービスを購入する必要があります。詳細については、「ライセンスの管理」をご参照ください。

• ウェブプレーヤー SDK での H.265/H.266 エンコーディングでサポートされているオーディオおよびビデオ形式については、「サポートされているプロトコル」をご参照ください。

• H.265/H.266 ビデオストリーム再生機能を使用する前に、プレーヤーの環境要件とブラウザの互換性を理解していることを確認してください。次の表に詳細を示します。

  項目	説明
  環境要件	プレーヤーは、Asynchronous JavaScript and XML (AJAX) を使用してビデオソースをセグメント単位でリクエストします。したがって、ビデオサービスは次の機能をサポートする必要があります。 range リクエストのサポート。 OPTIONS リクエストのサポート。Firefox などのブラウザは、range ヘッダー付きの AJAX リクエストを開始する前に OPTIONS リクエストを送信します。
  互換性	H.265 iOS 11 以降のデバイスは、H.265 ビデオ再生をネイティブでサポートしています。 一部の Android デバイスのブラウザは、システムの組み込みブラウザ、WeChat ブラウザ、UC ブラウザ、QQ ブラウザなど、H.265 ビデオのハードウェアデコーディングをすでにサポートしています。 Chrome、Edge、Firefox などのブラウザでのソフトウェアデコーディングシナリオでは、互換性はブラウザの WebAssembly API のサポートに依存します。サポートの詳細については、「WebAssembly」をご参照ください。古いバージョンでの WebAssembly のパフォーマンス問題のため、Chrome および Chromium ベースのブラウザはバージョン 74 以降である必要があります。 H.266 現在、H.266 再生をネイティブでサポートしているブラウザはないため、プレーヤーはソフトウェアデコーディングソリューションを使用します。これには、ブラウザの WebAssembly API との一定レベルの互換性が必要です。サポートの詳細については、「WebAssembly」をご参照ください。古いバージョンでの WebAssembly のパフォーマンス問題のため、Chrome および Chromium ベースのブラウザはバージョン 74 以降である必要があります。 iOS 16.4 未満のバージョンおよびほとんどの中低価格帯の Android モデルでは、H.266 をソフトウェアデコードできません。
  ソフトウェアデコーディングのパフォーマンス	H.265 デスクトップブラウザでは、マルチスレッドデコーディングは最大 2K 30 fps のビデオをサポートします。シングルスレッドデコーディングは最大 1080p 30 fps のビデオをサポートします。 モバイルブラウザでは、シングルスレッドデコーディングは最大 720p 30 fps のビデオをサポートします。モバイルのソフトウェアデコーディングパフォーマンスは、主にチップのパフォーマンスに依存します。テストによると、次のチップはシングルスレッドで 720p/30fps のビデオをスムーズにソフトウェアデコードできます。 Snapdragon 855 以降 Kirin 820 以降 Dimensity 800 以降 H.266 デスクトップブラウザでは、マルチスレッドデコーディングは最大 1080p 30 fps のビデオをサポートします。シングルスレッドデコーディングは最大 720p 30 fps のビデオをサポートします。 モバイルブラウザでは、シングルスレッドデコーディングは最大 720p 30 fps のビデオをサポートします。モバイルのソフトウェアデコーディングパフォーマンスは、主にチップのパフォーマンスに依存します。テストによると、次のチップはシングルスレッドで 720p/30fps のビデオをスムーズにソフトウェアデコードできます。 Snapdragon 855 以降 Kirin 820 以降

クイック統合

<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 - 現在のソフトウェアデコードのフレーム/秒
    // 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', () => {
      // 1 回のトリガーはデコードの変動による可能性があるため、このイベントが 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

Aliplayer API リファレンスには、ウェブプレーヤー SDK でサポートされているすべてのプロパティ、メソッド、イベントが、詳細な説明と例とともにリストされています。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, setSnapshotProperties, 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/wasmThreads) を通知します。

エラーコード

次の表に、H.265/H.266 再生に関連するエラーコードを示します。その他のエラーコードについては、「Aliplayer API リファレンス」をご参照ください。

マルチスレッド環境の設定

設定例

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

ライブタイムシフト

• ライブタイムシフトの有効化

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

  • プレーヤーでタイムシフト機能を有効にするには、次のプロパティを設定する必要があります。

    名前	説明
    isLive	値を true に設定します。
    liveTimeShiftUrl	タイムシフト情報をクエリするための URL。
    liveStartTime	ライブストリームの開始時刻。
    liveOverTime	ライブストリームの終了時刻。
    liveShiftSource	ライブタイムシフト用の HLS アドレス。 説明 これは、ソースが FLV ライブストリームの場合にのみ設定する必要があります。
    liveShiftMinOffset	タイムシフトされたセグメントの記録には時間がかかります。ライブ時間に近すぎるシークを行うと、セグメントがまだ生成されていないために 404 エラーが発生する可能性があります。デフォルトの最小シーク時間があり、このパラメーターで設定できます。単位は秒で、デフォルト値は 30 です (10 秒のセグメントを想定し、少なくとも 3 つのセグメントが利用可能であることを保証します)。

• ライブタイムシフト UI

  タイムシフト UI は、タイムシフト可能な範囲のプログレスバーと時間表示で構成されます。

  説明

  時間表示エリアは、左から右に、現在の再生時間、ライブストリーム終了時間、現在のライブ時間を表示します。

• ライブストリーム終了時間の調整

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

  player.liveShiftSerivce.setLiveTimeRange(“”,’2018/01/04 20:00:00’)

• FLV ライブストリーミングと HLS タイムシフトの切り替え

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

  ウェブプレーヤー SDK は次のモードをサポートしています。

  • source プロパティは FLV ライブストリームアドレスを指定します。

  • liveShiftSource プロパティは HLS アドレスを指定します。

  以下は例です。

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

ウェブプレーヤーを独自のサーバーにデプロイする

デフォルトでは、JS や CSS ファイルなどのウェブプレーヤー SDK リソースは、コンテンツ配信ネットワーク (CDN) に保存されています。これらのリソースを独自のサーバーにデプロイするには、次の手順に従います。

1. プレーヤーリソースのダウンロード

   aliplayer-min.js と aliplayer-min.css の 2 つのメインファイルに加えて、ウェブプレーヤー SDK は他のリソースファイルを動的に参照します。完全なリソースフォルダを取得する必要があります。

   ダウンロードアドレス：ウェブプレーヤーカスタムデプロイメントリソースプラン.tar.gz

2. 解凍とデプロイ

   前のステップでダウンロードしたリソースパッケージを解凍します。フォルダ内のすべてのサブファイルをサーバーにデプロイします。親フォルダ自体を含めたり、内部のファイル階層を調整したりしないでください。

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

   例えば、カスタムデプロイメントの参照アドレスが次のようになっているとします。

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

   初期化のために次の手順を実行します。

   1. ページの上部で JS と CSS のアドレスを参照します。

      <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'
        // ... その他のパラメーター
      })

リファレンス

• 公式コンポーネント

• 詳細については、「Aliplayer API リファレンス」をご参照ください。

• ウェブプレーヤーに関するよくある質問

• カスタムコンポーネントの開発

• H5 エラー UI のカスタマイズ

• ライブストリーミングエラーのトラブルシューティング