:高度な機能

再生コントロール

自動再生

// プレーヤーが初期化されたら、手動でプレーヤーをミュートします。

var player = new Aliplayer({

"id": "player-con" 、// ストリーミングURL。 例: example.aliyundoc.com/video/****.mp4.
"source":"<your URL>" 、"width": "100%" 、"height": "500px" 、"autoplay": true、"preload": true、"controlBarVisibility": "ホバー" 、"useH5Prism": true

}, function (プレーヤー) {

player.mute()

// または、setVolumeメソッドを呼び出して、プレーヤーのボリュームを0に設定することもできます。

}

);

連続再生

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

ApsaraVideo Player SDK for webを使用すると、プレーヤーのスキンなどのプレーヤーの外観をカスタマイズし、プレーヤーのコンポーネントと各コンポーネントの表示領域を表示するかどうかを指定できます。 これらのコンポーネントには、コントロールバーのユーザーインターフェース (UI) コンポーネントとエラー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},
            null
          ]
        }
      ]

  • 次のコードは、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},
            null
          ]
        },
        {
          名前: "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},
            null
          ]
        }
    ]

• エラーUI

  ApsaraVideo Player SDK for webは、デフォルトのエラーUIを提供します。 次の2つの方法のいずれかを使用して、エラーUIをカスタマイズすることもできます。 For more information, see Customize the error UI for the HTML5 player.

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

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

  • Define a new error UI

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

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

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

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

  注 設定の詳細については、プレーヤーのCSSファイルaliplayer-min.cssをご参照ください。 The following sample code provides an example on how to configure a large play button. 詳細については、「プレーヤースキンの設定」をご参照ください。

  . プリズムプレーヤー。prism-big-play-btn {
    幅：90ピクセル。
    高さ: 90px;
    背景: 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に設定します。

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

  <サブテクスチャ名="bigPlayDown" x="2" y="94" width="90" height="90"/>
  <サブテクスチャ名="bigPlayOver" x="94" y="2" width="90" height="90"/>
  <サブテクスチャ名="bigPlayUp" x="2" y="2" width="90" height="90"/>

Customize the video thumbnail

ApsaraVideo VODにアップロードする各ビデオにはサムネイルがあります。 ApsaraVideo VODには、サムネイルを変更するための複数の方法があります。 Before you upload a video, you can specify an image or a video snapshot as the thumbnail. 動画のアップロード後にサムネイルを変更できます。 次のいずれかの方法を使用して、ビデオのサムネイルをカスタマイズできます。

• Customize the video thumbnail in the ApsaraVideo for VOD console. 詳細については、「ビデオのサムネイルを設定する」をご参照ください。
• Customize the video thumbnail by setting the cover parameter of the player.

  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を使用すると、再生中にスナップショットをキャプチャできます。 キャプチャされたスナップショットは、画像タイプまたはJPEGタイプです。 スナップショット機能を有効にするための設定を行う必要があります。 When a snapshot is captured, the player returns Base64-encoded binary image data of the snapshot and the point in time at which the snapshot is captured in the source video.

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

• Enable the snapshot feature for an HTML5 player
  重要 Safariで再生されるFlash Video (FLV) ビデオのスナップショットはキャプチャできません。 スナップショット機能を有効にしても、スナップショットボタンは表示されません。 Canvasは、HTML5プレーヤーのスナップショット機能を有効にする要素です。 再生ドメインのクロスオリジンリソース共有 (CORS) を構成するために使用されるヘッダーを追加する必要があります。 詳細については、「CORSの設定」をご参照ください。
  Add the settings of the snapshot UI to the skinLayout attribute. The following sample code provides an example:

      skinLayout:[
      {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
      {
        名前: "H5Loading" 、align: "cc"
      },
      {name: "errorDisplay" 、align: "tlabs" 、x: 0、y: 0} 、
      {name: "infoDisplay"},
      {name:"tooltip" 、align:"blabs" 、x: 0、y: 56} 、
      {name: "thumbnail"},
      {
        名前: "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},
        ]
      }
    ]

  To enable the snapshot feature for an HTML5 player, you must configure CORS for videos to allow anonymous requests. 次のサンプルコードに例を示します。

    extraInfo:{
      crossOrigin:"anonymous"
    }

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

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

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

// 幅を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:{
    左: "100" 、
    top:"100" 、
    テキスト: "test" 、
    フォント: "italic bold 48px arial" 、
    strokeColor: 「赤」、
    fillColor:'green'
  }

長いビデオの機能

Adaptive bitrate streaming for HLS streams

To play videos in multiple bitrates, you must set the source parameter to a multi-bitrate streaming URL, which is called a master playlist. In addition, you must set the isVBR parameter to true. 適応型ビットレートストリーミング機能は、ネットワーク環境に基づく自動定義切り替えをサポートします。 必要に応じて手動で定義を切り替えることもできます。

ストリーミングURLの取得

Obtain the streaming URL of the video in multiple bitrates: player._hls.levels[player._hls.currentLevel].

varplayer = newAliplayer({
 "id":"player-con" 、
 "source":"マルチビットレートのストリーミングURL" 、
 "isVBR":true、
 },
 function () { }
);

設定後の定義切り替えオプションを次の図に示します。

External subtitles

ApsaraVideo VODコンソールで設定されているテンプレートグループの字幕テンプレートを使用して、外部字幕を追加できます。 ApsaraVideo Player SDK for webには手動設定は必要ありません。 外部字幕は、ビデオIDと再生資格情報に基づいてビデオを再生する場合にのみ追加できます。

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

ApsaraVideo Player SDK for webには手動設定は必要ありません。 次の図は、プレーヤーの複数のオーディオトラックの効果を示しています。

複数の言語

デフォルトでは、ApsaraVideo Player SDK for webは中国語と英語をサポートし、ブラウザの言語設定に基づいて自動的に中国語または英語に切り替わります。 さらに、ApsaraVideo Player SDK for webでは、他の言語をカスタマイズできます。 ApsaraVideo Player SDK for webでは、ApsaraVideo VODに基づいて複数のリージョンでビデオリソースを再生することもできます。 ビデオIDと再生資格情報に基づいて、東南アジアとヨーロッパのリージョンに保存されているビデオリソースを再生できます。

Usage notes for the language parameter

var player = new Aliplayer({
    id: "player-con",
    source: "",
    幅: "100%" 、
    height: "500px",
    autoplay: true、
    言語: "en-us" 、
  }, function (プレーヤー) {
    console.log("プレイヤーが作成されました。");
  });

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

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

Customize a language for the player

If you want the player to support UI elements in languages except for Chinese and English, you must specify the language by using the languageTexts attribute, which contains a list of key-value pairs. The value of the language attribute indicates the key, and the JSON value indicates the UI elements to be translated into the specified language. 次のサンプルコードに例を示します。

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

ApsaraVideo Player SDK for web allows you to play videos stored in the China (Shanghai), Germany (Frankfurt), and Singapore (Singapore) regions of the ApsaraVideo VOD service. ビデオIDと再生資格情報またはSecurity Token Service (STS) に基づいてビデオを再生できます。 プレーヤーはリージョン情報を解析し、ApsaraVideo VODサービスのこのリージョンのビデオのストリーミングURLを取得します。

• ビデオIDおよび再生資格情報に基づく再生: プレーヤは、再生資格情報から領域情報を解析して、ビデオのストリーミングURLを取得する。 この場合、設定でリージョンを指定する必要はありません。
• STSベースの再生: regionパラメーターを設定することで、再生するビデオが存在するリージョンを指定できます。 リージョンパラメーターの有効な値: cn-shanghai、eu-central-1、およびap-southeast-1。 デフォルト値: cn-shanghai。 次のサンプルコードに例を示します。

  var player = new Aliplayer({
      id: "player-con" 、
      width: "100%",
      高さ: "500px" 、
      autoplay: true、
      言語: "en-us" 、
      vid : '1e067a2831b641db90d570b6480f **** '、
      accessKeyId: '',
      securityToken: '',
      accessKeySecret: ''
      リージョン: 'eu-central-1, // ドイツ (フランクフルト) リージョン。
    }, function (プレーヤー) {
      console.log("プレイヤーが作成されました。");
    });

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の設定:

  • source: ライブストリーミング用のFLV URL。
  • liveShiftSource: タイムシフト用のHLS URL。

  次のサンプルコードに例を示します。

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