公式 ApsaraVideo Player SDK コンポーネント - ApsaraVideo VOD - ApsaraVideo VOD

ApsaraVideo Player SDK には、広告、字幕、プレイリストなどの一般的なシナリオ向けの組み込みコンポーネントが用意されています。そのまま使用することも、カスタマイズすることも可能です。

概要

ソースコードは GitHub で入手できます。
機能タブでコンポーネントをお試しいただけます。
一部の機能は、モバイルの組み込みブラウザでは動作しません。
GitHub はサードパーティのサイトです。接続に問題が発生することがあります。

コンポーネント一覧

コンポーネント名	タイプ	説明	表示例
弾幕コメント	`AliplayerDanmuComponent`	テキスト入力ボックスと、ライブコメントの有効化、無効化、送信を行うコントロールバーボタンを追加します。弾幕コンポーネントをご参照ください。
アニメーションウォーターマーク (マーキーコンポーネント)	`BulletScreenComponent`	不正コピーを防止するため、スクロールテキストウォーターマーク (ユーザー ID など) を追加します。位置、色、フォントサイズのカスタマイズに対応しています。マーキーコンポーネントをご参照ください。デフォルトでは、マーキーアニメーションは 10 秒間継続します。スクロール間隔をカスタマイズする場合 (例：4 秒) は、CSS でアニメーションをオーバーライドしてください：`.bullet-screen { animation: bullet 4s linear infinite !important; }`。コンポーネントの組み込みスタイルをオーバーライドするには、`!important` フラグが必要です。
字幕	`CaptionComponent`	字幕の言語を切り替えます。字幕コンポーネントをご参照ください。
動画広告ポッド	`ManyVideoADComponent`	メインコンテンツの前に一連の動画広告を再生します。動画広告ポッドコンポーネントをご参照ください。
レジューム再生	`MemoryPlayComponent`	最後の再生位置を自動的に保存します。2 つのモードがあります：クリックして再生：再生時に最後の位置を表示し、シークするオプションを提供します。自動再生：再生開始時に最後に保存された位置にシークします。レジューム再生コンポーネントをご参照ください。説明ブラウザの localStorage のサポートが必要です。
一時停止広告 (画像)	`PauseADComponent`	一時停止時にプレーヤーの中央に画像広告オーバーレイを表示します。一時停止広告コンポーネントをご参照ください。
動画プレイリスト	`PlaylistComponent`	コントロールバーにプレイリストボタンを追加し、動画間の切り替えを可能にします。動画プレイリストコンポーネントをご参照ください。
プレビュー	`PreviewVodComponent`	再生をプレビュー時間に制限し、その後フルアクセスのためのプロンプト (例：サブスクリプションまたは購入) を表示します。プレビューコンポーネントをご参照ください。
プログレスマーカー	`ProgressComponent`	プログレスバーにキーポイント用のマーカーを追加します。マーカーにホバーするとサムネイルプレビューが表示されます。プログレスマーカーコンポーネントをご参照ください。	完全なプレーヤーインターフェースの例では、以下を含む複数の公式コンポーネントの統合が実演されています：サムネイルプレビューツールチップ (タイトルと説明を表示) レジューム再生バー (前回は 00:34 まで再生しました。クリックして再開) 字幕表示下部コントロールバー (一時停止、プログレスバー、音量、設定、CC 字幕、フルスクリーンボタン)
解像度	`QualityComponent`	動画の解像度を切り替えます。解像度コンポーネントをご参照ください。
再生速度	`RateComponent`	動画の再生速度を調整します。再生速度コンポーネントをご参照ください。
回転とミラーリング	`RotateMirrorComponent`	コントロールバーに回転とミラーボタンを追加します。回転とミラーリングコンポーネントをご参照ください。
開始広告 (画像)	`StartADComponent`	動画の再生開始前に画像広告を表示します。開始広告コンポーネントをご参照ください。
音声トラック切り替え	`TrackComponent`	音声トラックを言語間で切り替えます。音声トラック切り替えコンポーネントをご参照ください。	-
動画広告	`VideoADComponent`	メインコンテンツの前に時間制限付きの動画広告を再生します。動画広告コンポーネントをご参照ください。
次を再生	`PlayerNextComponent`	コントロールバーに次を再生ボタンを追加します。クリックイベントはカスタム定義してパラメータとして渡すことができます。次を再生コンポーネントをご参照ください。

コンポーネントの使用

コンポーネントを ApsaraVideo Player SDK に追加します。現在、CDN URL は提供されていません。コンポーネントパッケージをダウンロードして、プロジェクトに含めてください。最新バージョンをご使用ください。
```
<script type="text/javascript" src="your-public-path/aliplayercomponents-1.0.9.min.js"></script>
```

コンポーネントを ApsaraVideo 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: [
          "Welcome to use 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 コンポーネントをパッケージ化します。