ApsaraVideo VOD:コンポーネント

内蔵コンポーネント

再生コンポーネントの再開

このコンポーネントを使用すると、前の再生位置から再生を再開できます。 [再生位置の記憶] ([手動]) を選択すると、以前の再生位置が通知されます。 プログレスバーをクリックすると、再生位置を探すことができます。 あなたが選択した場合再生位置を記憶する (自動再生) 、ビデオは前の再生位置から自動的に再生されます。 詳細については、「再生コンポーネントの再開」をご参照ください。

アニメーション透かし (マーキーコンポーネント)

このコンポーネントは、ユーザーIDなどのユーザー情報を含むテキスト透かしをビデオに追加するために使用されます。 これは著作権侵害を減らすのに役立ちます。 透かしの位置と、テキストの色とサイズを指定できます。 詳細については、「マーキーコンポーネント」をご参照ください。

広告コンポーネントの開始

このコンポーネントは、ビデオの再生開始前に画像広告を表示するために使用されます。 詳細については、「広告コンポーネントの開始」をご参照ください。

一時停止広告コンポーネント

このコンポーネントは、ビデオ再生が一時停止されるときに画像広告を表示するために使用されます。 詳細については、「一時停止広告コンポーネント」をご参照ください。

ビデオ広告シーケンスコンポーネント

このコンポーネントは、ビデオの再生開始前に複数のビデオ広告を再生するために使用されます。 詳細については、「動画広告シーケンスコンポーネント」をご参照ください。

次のコンポーネント

このコンポーネントは、[次へ再生] ボタンをプレーヤーのコントロールバーに追加します。 ボタンのクリックイベントをカスタマイズし、コンポーネントパラメーターとしてクリックイベントを渡すことができます。 詳細については、「次のコンポーネントの再生」をご参照ください。

プレイリストコンポーネント

このコンポーネントは、プレイリストを表示し、ビデオを切り替えるためのボタンをプレーヤーのコントロールバーに追加し、プレーヤーにプレイリストを表示します。 詳細については、「Playlistコンポーネント」をご参照ください。

回転とミラーリングコンポーネント

このコンポーネントは、ビデオを回転およびミラーリングするためのボタンをプレーヤーのコントロールバーに追加します。 詳細については、「回転とミラーリングコンポーネント」をご参照ください。

ビデオ広告コンポーネント

ビデオ広告コンポーネントは、ビデオ再生が始まる前にビデオ広告を再生します。 詳細については、「ビデオ広告コンポーネント」をご参照ください。

ライブコメントコンポーネント

ライブコメントコンポーネントは、テキスト入力ボックスと、ライブコメントを有効にし、無効にし、プレーヤーのコントロールバーに送信するためのボタンを追加します。 詳細については、「Danmuコンポーネント」をご参照ください。

プレビューコンポーネント

このコンポーネントを使用すると、一定期間ビデオをプレビューできます。 プレビューが終了すると、このコンポーネントは、ビデオ全体を再生するために満たす必要がある条件を通知します。 詳細については、「プレビューコンポーネント」をご参照ください。

進捗マーカーコンポーネント

このコンポーネントは、ビデオのキーポイントをマークします。 マークされたキーポイントの上にポインタを移動すると、指定された画像が表示されます。 詳細については、「進行状況マーカーコンポーネント」をご参照ください。

字幕コンポーネント

このコンポーネントを使用すると、異なる言語で字幕を切り替えることができます。 詳細については、「字幕コンポーネント」をご参照ください。

オーディオトラックコンポーネント

このコンポーネントは、オーディオトラックを切り替えるために使用されます。 詳細については、「オーディオトラックコンポーネント」をご参照ください。

コンポーネントの追加

1. ApsaraVideo Player SDK for Webにコンポーネントを追加します。

   <script type="text/javascript"charset="utf-8"src="/aliplayercomponents-1.0.9.min.js"></script>

   説明

   Alibaba Cloud CDNリソースは、ApsaraVideo Player SDK for Webに含まれていません。 CDNリソースを使用する場合は、ローカルPCにダウンロードした後に追加します。 JSファイルをダウンロードするには、AliyunPlayer_Webページにアクセスします。

2. コンポーネントをApsaraVideo Player SDK for Webにマウントします。

   説明

   次のサンプルコードに例を示します。 構成はコンポーネントによって異なります。

   var player = new Aliplayer({
           id: "player-con",
           source: "//player.alicdn.com/video/editor.mp4",
           components: [{
               name: 'xxxComponent',
               type: AliPlayerComponent.xxxComponent
           }]
        }, function (player) {
    });

コンポーネントの管理

コンポーネントを1つだけ使用する必要がある場合は、コンポーネントのJSファイルをプロジェクトに追加します。 ApsaraVideo Playerコンポーネントライブラリでコンポーネントを使用するには、AliPlayerComponent.XXXを呼び出してコンポーネントをプレーヤーに追加します。

パッケージコンポーネント

"build_customize": set NODE_ENV=production&&webpack --config webpack.config.customize.js --progress

• すべてのコンポーネントをパッケージ化

  次のいずれかのコマンドを実行して、ApsaraVideo Player SDK for Webのすべてのコンポーネントをパッケージ化できます。 コンポーネントパッケージは、/disk/aliplayer-components/aliplayercomponents.min.jsに保存されます。

  $ npm run build
  # or
  $ npm run build all

• パッケージ固有のコンポーネント

  コンポーネントパッケージのサイズを小さくするには、次のコマンドを実行して、必要なコンポーネントのみをパッケージに追加します。

  $ npm run build componentsName # componentsName indicates the component name.

  説明

  componentsNameはコンポーネント名を示します。 複数のコンポーネント名をスペースで区切ります。 たとえば、ライブコメントコンポーネントとマーキーコンポーネントをパッケージ化するには、$ npm run build AliplayerDanmu BulletScreenコマンドを実行します。 componentsNameの有効な値:

  • AliplayerDanmu: ライブコメントコンポーネント。

  • BulletScreen: マーキーコンポーネント。

  • MemoryPlay: レジューム再生コンポーネント。

  • PauseAD: ポーズ広告コンポーネント。

  • PlayerNext: 次のコンポーネントを再生します。

  • Playlist: プレイリストコンポーネント。

  • Preview: プレビューコンポーネント。

  • RotateMirror: 回転およびミラーリングコンポーネント。

  • StartAD: 開始広告コンポーネント。

  • Staticad: 一時停止広告コンポーネント。

  • VideoAD: ビデオ広告コンポーネント。

  • キャプション: 字幕コンポーネント。

  • トラック: オーディオトラックコンポーネント。

  • ManyVideoAD: ビデオ広告シーケンスコンポーネント。

  • RateComponent: 再生速度コンポーネント。

  コンポーネントパッケージaliplayercomponents.min.jsは /disk/aliplayer-componentsに保存されます。 ファイルをプロジェクトに追加して、コンポーネントを使用します。

特定のコンポーネントの追加

• HTMLファイルにJSファイルを追加します。

  
  <script type="text/javascript" src="js/staticAdComponent.min.js"></script>
                      

• コンポーネントをプレーヤーに追加します。

  var option = {
       id: "J_prismPlayer",
       autoplay: true,
       isLive:false,
       playsinline:true,
       width:"100%",
       height:"100%",
       useH5Prism:true, // Enable the HTML5 player.
       useFlashPrism:false,
       source:source,
       vid:vid,
       playauth:playauth,
       cover:"",
       components:[{type:StaticAdComponent,args:['http://cdnoss.example.com/cover****.png',
       'http://player.alicdn.com']}]
  };
  
  var player = new Aliplayer(option);
                      

ApsaraVideo Playerコンポーネントライブラリの追加

• HTMLファイルにJSファイルを追加します。

  <script type="text/javascript" src="js/aliplayerComponents.min.js"></script>

• コンポーネントをプレーヤーに追加します。 次の表に、設定で使用されるパラメーターを示します。

  パラメーター	説明
  name	コンポーネントの名前を示します。 プレーヤーは、コンポーネント名によってコンポーネントを取得します。
  type	コンポーネントのタイプ。
  args	コンポーネントのパラメータ。

  var option = {
       id: "J_prismPlayer",
       autoplay: true,
       isLive:false,
       playsinline:true,
       width:"100%",
       height:"100%",
       useH5Prism:true, // Enable the HTML5 player.
       useFlashPrism:false,
       source:source,
       vid:vid,
       playauth:playauth,
       cover:"",
       components:[{type:AliPlayerComponent.StaticAdComponent,args:['http://cdnoss.youkouyang.com/cover.png',
       'http://player.alicdn.com']},
       notParameComponent,
       {name:'adComponent1',type:notParameComponent}
       ]
  };
  
  var player = new Aliplayer(option);
                      

コンポーネントの取得

getComponentメソッドを呼び出し、nameパラメーターを設定してコンポーネントを取得します。

var component = player.getComponent('adComponent');

依存関係の追加

$ cd customComponents
$ npm install