ApsaraVideo VOD:高度な機能

再生コントロール

自動再生

• ApsaraVideo Player SDK for Webは自動再生をサポートしています。

  多くのブラウザは、自動再生に対してより厳しいポリシーを課します。 autoplay属性を指定したり、play() メソッドを呼び出して自動再生を有効にすることはできません。 自動再生を有効にするには、手動設定またはビデオのミュートの方法を使用します。 たとえば、プレーヤーの初期化後、setVolumeを呼び出してビデオをミュートできます。

  説明

  • 自動再生機能は、次のデスクトップブラウザーではサポートされていません。

    • macOS High SierraのSafari 11以降

    • Google Chrome 55以降

  • 自動再生は、特定のモバイルブラウザとWebViewアプリ、特にAndroidのアプリで許可される場合があります。

  • WeChatやQQ Browserなどのブラウザは、組み込みのプレーヤーを使用して再生します。 この場合、ビデオがミュートされていても自動再生はサポートされません。 詳細については、「ブラウザのハイジャックによるビデオ再生の問題」をご参照ください。

  次のサンプルコードは、URLベースの再生にHTML5プレーヤーを使用する場合に、ミュートモードでビデオを自動的に再生する方法の例を示しています。

  • ApsaraVideo Player SDK for Web V2.20.3以降

    var player = new Aliplayer({
      "id": "player-con",
      // The playback URL. Example: example.aliyundoc.com/video/****.mp4.
      "source":"<your URL>",
      "autoplay": true,
      "mute": true
      }, function (player) {});

  • V2.20.3より前のバージョンのApsaraVideo Player SDK for Web

    // After the player is initialized, mute the video.
    var player = new Aliplayer({
      "id": "player-con",
      // The playback URL. Example: example.aliyundoc.com/video/****.mp4.
      "source":"<your URL>",  
      "autoplay": true
      }, function (player) {
      player.mute()
      // Alternatively, you can call setVolume to set the player volume to 0.
      }
    );

• WeChat for iOSで自動再生機能を有効にできます。 サンプルコード：

  <div id="player-con"></div>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script>
  wx.config({
      // The configuration information. You can call the wx.ready method even if the configuration information is invalid.
      debug: false,    // false indicates that the debug mode is disabled and true indicates that the debug mode is enabled.
      appId: '',       //appId
      timestamp: 1,    // The timestamp when the signature is generated.
      nonceStr: '', // A random string that is used to generate the signature.
      signature: '',   // The signature.
      jsApiList: []    // The required JavaScript APIs.
  });
  wx.ready(function() {
    // Initialize the player.
    createPlayer();
  });
  
  function createPlayer() {
    var player = new Aliplayer({
      id: 'player-con',
      source: '',
      autoplay: true
    });
  }
  </script>

連続再生

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

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

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

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

  • 次のコードは、ApsaraVideo player SDK for Webが提供するHTML5プレーヤーのデフォルト設定を示しています。

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

  • 次のコードは、ApsaraVideo player SDK for Webが提供するFlashプレーヤーのデフォルト設定を示しています。

    skinLayout:[
        {name:"bigPlayButton", align:"blabs", x:30, y:80},
        {
          name:"controlBar", align:"blabs", x:0, y:0,
          children: [
            {name:"progress", align:"tlabs", x: 0, y:0},
            {name:"playButton", align:"tl", x:15, y:26},
            {name:"nextButton", align:"tl", x:10, y:26},
            {name:"timeDisplay", align:"tl", x:10, y:24},
            {name:"fullScreenButton", align:"tr", x:10, y:25},
            {name:"streamButton", align:"tr", x:10, y:23},
            {name:"volume", align:"tr", x:10, y:25}
          ]
        },
        {
          name:"fullControlBar", align:"tlabs", x:0, y:0,
          children: [
            {name:"fullTitle", align:"tl", x:25, y:6},
            {name:"fullNormalScreenButton", align:"tr", x:24, y:13},
            {name:"fullTimeDisplay", align:"tr", x:10, y:12},
            {name:"fullZoom", align:"cc"}
          ]
        }
    ]

• エラーUI

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

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

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

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

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

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

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

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

  説明

  設定の詳細については、プレーヤーの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;
  }

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

  skin.pngおよびskin.xmlファイルを http://[domain]/[path]/ ディレクトリに保存します。 次に、プレーヤーにskinRes:"http:// domain/path/skin" を指定します。

  説明

  次のサンプルコードは、大きな再生ボタンを設定する方法の例を示しています。 詳細については、「プレーヤースキンの設定」をご参照ください。

  <SubTexture name="bigPlayDown" x="2" y="94" width="90" height="90"/>
  <SubTexture name="bigPlayOver" x="94" y="2" width="90" height="90"/>
  <SubTexture name="bigPlayUp" x="2" y="2" width="90" height="90"/>

ビデオのサムネイルをカスタマイズする

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

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

• プレーヤーのカバー属性を設定して、ビデオサムネイルを設定します。

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

ビデオスナップショット

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

スナップショット機能の有効化

• HTML5プレーヤーのスナップショット機能を有効にする

  重要

  Safariで再生されるFlash Video (FLV) ビデオからスナップショットをキャプチャすることはできません。 スナップショット機能を有効にしても、スナップショットボタンは表示されません。 Canvasは、HTML5プレーヤーのスナップショット機能を有効にする要素です。 再生ドメインのクロスオリジンリソース共有 (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},
        ]
      }
    ]

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

    extraInfo:{
      crossOrigin:"anonymous"
    }

• Flash playerのスナップショット機能を有効にする

  説明

  リアルタイムメッセージングプロトコル (RTMP) ストリームの再生中にスナップショットをキャプチャすることはできません。

  Flash playerのスナップショット機能を有効にするには、snapshot属性をtrueに設定する必要があります。

スナップショットのサイズと品質の設定

// Set the snapshot width to 300, height to 200, and quality to 0.9.
// The snapshot height and width are displayed in pixels. You can set the snapshot quality to a value ranging from 0 to 1. The default value is 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 arial",
    strokeColor:"red",
    fillColor:'green'
  }

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

let lastTime = 0;
player.on('timeupdate', () => {
  if (!player.tag.seeking) {
    // Obtain the last playback position.
    lastTime = player.getCurrentTime();
  }
})

player.on('seeking', () => {
  var delta = player.getCurrentTime() - lastTime;
  if (Math.abs(delta) > 0.01) {
    console.log("Seeking is disabled");
    // The player seeks to the old playback position when a user drags the progress handle.
    // This feature is not available in QQ Browser for iOS because you cannot obtain or modify the currentTime parameter in QQ Browser.
    player.tag.currentTime = lastTime;
  }
});

player.on('ended', function() {
    lastTime = 0;
});

長いビデオの機能

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

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

再生URLの取得

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

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

次の図は、ビデオ品質の設定を示しています。

外部字幕の設定

// Change the subtitle language.
var lang = 'zh-Hans/en-US';
player._ccService.switch(lang);
player._ccService.updateUI(lang); // The UI elements are not automatically updated. You can call API operations to update the UI elements.

// Turn on subtitles.
var result = player._ccService.open();
player._ccService.updateUI(result.language);

// Turn off subtitles.
player._ccService.close();
player._ccService.updateUI();

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

ApsaraVideo Player SDK for Webには手動設定は必要ありません。 オーディオトラックの設定を次の図に示します。

複数の言語

デフォルトでは、ApsaraVideo Player SDK for Webは中国語と英語をサポートし、ブラウザの言語設定に基づいて中国語と英語を自動的に切り替えます。 ApsaraVideo Player SDK for Webでは、カスタム言語を指定できます。 ApsaraVideo Player SDK for Webを使用すると、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 indicates Chinese. en-us indicates English. 
 },
 function (player) {}
);

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

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

var player = new Aliplayer({
 "id": "player-con",
 "source": "",
 "language": "CustomLanguage",// Specify a language in the STRING type.
"languageTexts":{
    "CustomLanguage":{
        "Pause":"Pause"
        // Other parameters. For more information, visit 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。 デフォルト値: cn-shanghai。 サンプルコード：

  var player = new Aliplayer({
      id: "player-con",
      width: "100%",
      height: "500px",
      autoplay: true,
      language: "en-us",
      vid : '1e067a2831b641db90d570b6480f****',
      accessKeyId: '',// The AccessKey ID that is generated when the temporary STS token is issued. 
      securityToken: '',// The temporary STS token. To generate an STS token, call the AssumeRole operation. 
      accessKeySecret: ''// The AccessKey ID that is generated when the temporary STS token is issued. 
      region:'eu-central-1',// The Germany (Frankfurt) region.
    }, 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およびH.266ビデオを再生するには、Yidaでリクエストを送信ライセンスを申請してください。

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

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

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

{
  //... Configure other parameters.
  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) {
      // Notify the user or use a degraded protocol for playback if the API operation is not supported in your browser or video decoding failed.
    }
});

player.on('h265DecoderOverload', (e) => {
    var data = e.paramData;
    // data.decodedFps specifies the number of frames per second that are decoded by using software decoding.
    // data.fps specifies the frame rate of the current video.
    // data.playbackRate specifies the current playback speed.
    // If the product of data.fps and data.playbackRate is greater than data.decodedFps for more than 5 seconds, an error event occurs. In this case, stuttering may occur during playback. You need to notify the user or use a degraded protocol for playback.
});
                            

  var player;

  // Create a 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', () => {
      // We recommend that you use a degraded protocol for playback after two consecutive error events are triggered because decoding may also trigger an error event.
      fallbackTo264(_options)
    })
    return player;
  }

  // Configure a degradation logic.
  function fallbackTo264(_options) {
      // Specify the playback URL of an H.264 video for the source parameter.
      _options.source = '//h264.mp4';
      // Set enableH265.to false to disable codec sniffing.
      _options.enableH265 = false;
      createPlayer(_options);
  }

  // Initialize the player.
  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) {
      // Notify the user or use a degraded protocol for playback if the API operation is not supported in your browser or video decoding failed.
    }
});          

  var player;

  // Create a 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;
  }

  // Configure a degradation logic.
  function fallbackTo264(_options) {
      // Specify the playback URL of an H.264 video for the source parameter.
      _options.source = '//h264.mp4';
      // Set enableH266. to false to disable codec sniffing.
      _options.enableH266 = false;
      createPlayer(_options);
  }

  // Initialize the player.
  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、setImage、setCover、setProgressMarkers、setPreviewTime、getPreviewTime、およびisPreview

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

  ready、play、pause、canplay、play、end、hideBar、showBar、waiting、timeupdate、snapshoted、requestFullScreen、cancelFullScreen、エラー、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

HTML5プレーヤーでのライブストリーミングのタイムシフト

• タイムシフトの有効化

  • 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を使用することをお勧めします。

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

   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'
        // Specify other parameters.
      })