:コンポーネント

内蔵コンポーネント

最後に再生された位置コンポーネントを使用すると、ビデオの最後に再生された位置から再生を再開できます。 このコンポーネントは、最後に再生されたポジションを通知して、このポジションを探すことができます。 あるいは、このコンポーネントは、最後に再生された位置に自動的にシークし、この位置から再生を開始することができる。 詳細については、「前回再生した位置コンポーネント」をご参照ください。

マーキーコンポーネントは、スクロールテキストを表示するために使用されます。 テキストの位置、色、フォントサイズを設定できます。 For more information, see Marquee component.

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

The pause ad component is used to display an image ad when a video is paused. For more information, see Pause ad component.

The video ad sequence component plays a series of video ads before a video is played. 詳細については、「動画広告シーケンスコンポーネント」をご参照ください。

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

The playlist component adds the button for displaying the playlist and buttons for switching among videos to the control bar of the player and displays a playlist in the player. 詳細については、「Playlistコンポーネント」をご参照ください。

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

ビデオ広告コンポーネントは、ビデオが再生される前にビデオ広告を再生する。 For more information, see Video ad component.

The live comment component adds a text input box and the buttons for enabling, disabling, and sending live comments to the control bar of the player. 詳細については、「ライブコメントコンポーネント」をご参照ください。

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

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

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

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

コンポーネントの参照

1. ApsaraVideo Player SDK for webのコンポーネントを参照します。

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

   注 Alibaba Cloud Content Delivery Network (CDN) リソースは使用できません。 したがって、を参照できます。CDNを使用するのではなく、オンプレミスのデバイスからのみコンポーネントのjsファイル。 aliplayercomponents-1.0.8.min.jsファイルをダウンロードするには、AliyunPlayer_Webページにアクセスします。
2. コンポーネントをマウントします。
   注 次のサンプルコードは参考用です。 構成は、コンポーネントの種類によって異なります。

   var player = new Aliplayer({
           id: "player-con" 、
           source: "// player.alicdn.com/video/editor.mp4" 、
           コンポーネント: [{
               名前: 'xxxComponent' 、
               タイプ: AliPlayerComponent.xxxComponent
           }]
        }, function (プレーヤー) {
    });

コンポーネントの管理

If you need to use only a single component, reference the .js file of this component. ApsaraVideo Playerコンポーネントライブラリでコンポーネントを使用するには、AliPlayerComponent.XXX.jsファイルを参照します。

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

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

• すべてのコンポーネントをパッケージ化
  次のいずれかのコマンドを実行して、すべてのコンポーネントをパッケージ化できます。 パッケージ化されたファイルは /disk/aliplayer-components/aliplayercomponents.min.jsです。

  $npm実行ビルド
  # または
  $npm run build all

• 必要に応じてコンポーネントをパッケージ化
  パッケージ化されたファイルのサイズを小さくするには、使用するコンポーネントのみをパッケージ化します。 これを行うには、次のコマンドを実行します。

  $npm run build componentsName # componentsNameはコンポーネント名を示します。

  注 componentsName indicates the component name. Separate multiple component names with spaces. たとえば、ライブコメントコンポーネントとマーキーコンポーネントをパッケージ化するには、$ npm run build AliplayerDanmu BulletScreenコマンドを実行します。 componentsNameパラメータの有効値:

  • AliplayerDanmu: ライブコメントコンポーネント。
  • BulletScreen: マーキーコンポーネント。
  • MemoryPlay: 最後に再生された位置コンポーネント。
  • PauseAD: ポーズ広告コンポーネント。
  • PlayerNext: 次のコンポーネントを再生します。
  • Playlist: プレイリストコンポーネント。
  • Preview: プレビューコンポーネント。
  • RotateMirror: the rotation and mirroring component.
  • StartAD: 開始広告コンポーネント。
  • Staticad: 静的広告コンポーネント。
  • VideoAD: ビデオ広告コンポーネント。
  • キャプション: 字幕コンポーネント。
  • トラック: オーディオトラックコンポーネント。
  • ManyVideoAD: ビデオ広告シーケンスコンポーネント。

  The packaged file is /disk/aliplayer-components/aliplayercomponents.min.js, which can be referenced on your page.

• 特定のものを参照してください。HTMLファイル内のjsファイル。

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

• Add the component to the configurations of the player.

  var option = {
       id: "J_prismPlayer" 、
       autoplay: true、
       isLive:false、
       playsinline:true、
       幅: "100%" 、
       高さ: "100%" 、
       useH5Prism:true, // HTML5プレーヤーを有効にします。
       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=新しいAliplayer (オプション);
                      

• 特定のものを参照してください。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%",
       高さ: "100%" 、
       useH5Prism:true, // HTML5プレーヤーを有効にします。
       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);
                      

You can call the getComponent method and set the name parameter to obtain a component.

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

$cd customComponents
$npmインストール