ApsaraVideo VOD:公式コンポーネント

ApsaraVideo Player SDK は、広告、字幕、プレイリスト、その他の一般的なシナリオに対応する組み込みコンポーネントを提供します。これらはそのまま使用することも、カスタマイズすることもできます。

概要

• ソースコードは GitHub で公開されています。

• [機能] タブでコンポーネントを試すことができます。

• 一部の機能は、モバイル端末の組み込みブラウザーでは動作しない場合があります。

• GitHub はサードパーティのサイトです。接続に問題が発生することがあります。

コンポーネント一覧

コンポーネントの使用

1. コンポーネントを Web Player SDK に追加します。現在、CDN URL は利用できません。コンポーネントパッケージをダウンロードし、プロジェクトに組み込んでください。最新バージョンをご利用ください。

   <script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>

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

   var player = new Aliplayer(
     {
       id: "player-con",
       source: "//player.alicdn.com/video/editor.mp4",
       components: [
         {
           name: "StartADComponent",
           type: AliPlayerComponent.StartADComponent,
           args: [
             "https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg",
             "https://promotion.aliyun.com/ntms/act/videoai.html",
             3,
           ],
         },
         {
           name: "BulletScreenComponent",
           type: AliPlayerComponent.BulletScreenComponent,
           args: [
             "Aliplayer へようこそ",
             { fontSize: "16px", color: "#00c1de" },
             "random",
           ],
         },
       ],
     },
     function (player) {}
   );

   コンポーネントのプロパティ：

   プロパティ	説明
   name	コンポーネントの一意の名前。インスタンスを取得するために使用されます。
   type	コンポーネントのクラスです。
   args	コンストラクターの引数。必須パラメーターと一致する必要があります。

カスタムビルドの作成

すべてのコンポーネント

すべてのコンポーネントをビルドします。出力: /dist/aliplayer-components/aliplayercomponents-[version].min.js

$ npm run build

コンポーネントのカスタムセット

バンドルサイズを削減するには、特定のコンポーネントのみをビルドします：

$ npm run build componentsName # componentsName はコンポーネント名

componentsName はスペース区切りのリストです。 例：

$ npm run build AliplayerDanmu BulletScreen # AliplayerDanmu と BulletScreen コンポーネントをパッケージ化します。