すべてのプロダクト
Search
ドキュメントセンター

ApsaraVideo VOD:Aliplayer API リファレンス

最終更新日:Mar 06, 2026

このトピックでは、Aliplayer がサポートするプロパティ、メソッド、およびイベントについて説明します。

説明

問題が発生した場合は、「Web プレーヤー よくある質問」または「再生エラーのトラブルシューティング」をご参照ください。

プロパティ

Aliplayer を初期化する際に、ライセンス、再生リソース、プレーヤーのスタイル、再生動作などのさまざまなプロパティを設定できます。

名前

説明

id

String

プレーヤーの外側コンテナとなる DOM 要素の ID。

source

String

動画再生 URL。URL 再生方式を使用する場合、この source プロパティで URL を指定します。

説明
  • URL 再生方式は、VidAuth や VidSts などの他の再生方式よりも優先度が高くなります。そのため、VidAuth や VidSts を使用している場合には、source プロパティを指定できません。source プロパティが指定されている場合、プレーヤーはその URL を優先して再生します。再生方式は 1 つだけ設定することを推奨します。

  • URL 再生方式では、複数の定義(マルチ定義)をサポートしています。source プロパティを使用して、複数の定義ストリームの URL を指定できます。詳細については、「マルチ定義再生」をご参照ください。例:

    source:'{"HD":"address1","SD":"address2"}'

vid

String

ApsaraVideo Media Processing サービスにおけるメディアアセットの ID。

playauth

String

再生認証情報。再生認証情報の取得方法については、「音声・動画の再生認証情報の取得」をご参照ください。

customVodServer

String

カスタムビデオオンデマンド(VOD)プロキシドメイン名(バージョン 2.32.0 以降で VidAuth 再生方式に適用)。専用のリクエストプロキシサービスをデプロイする必要があります。デフォルトのビデオオンデマンド(VOD)ドメイン名(*.aliyuncs.com)にアクセスできない場合、プレーヤーは自動的にお客様のプロキシサービスにフォールバックし、ISP ハイジャッキングの脅威を効果的に回避し、再生の安定性と成功率を大幅に向上させます。

playConfig

JSON

Vid 基盤再生(VidAuth および VidSts 方式)向けのカスタム設定フィールド。このフィールドは VOD API にそのまま渡されます。サポートされるカスタムフィールドとその説明については、「カスタムメディア再生設定:PlayConfig」をご参照ください。例:

{"PlayDomain":"vod.test_domain","PreviewTime":"20","MtsHlsUriToken":"yqCD7******oVjslp5Q"}

authTimeout

Number

Vid 基盤再生(VidAuth および VidSts 方式)で取得した動画再生 URL の有効期間。単位:秒。デフォルト値:7200。

再生が完了するまで URL が有効であることを保証するため、この期間は実際の動画再生時間より長く設定してください。

height

String

プレーヤーの高さ。有効な値:

  • 100%

  • 100px

width

String

プレーヤーの幅。有効な値:

  • 100%

  • 100px

autoSize

Boolean | String

プレーヤーサイズを動画コンテンツに自動的に合わせます。有効な値は「height」と「width」です。

たとえば、width: '500px'、autoSize: 'height' を指定した場合、プレーヤーは幅を 500px に固定し、動画の実際の縦横比に基づいて高さを自動調整します。

また、height: '500px'、autoSize: 'width' を指定した場合、プレーヤーは高さを 500px に固定し、動画の実際の縦横比に基づいて幅を自動調整します。

注: autoSize: true は autoSize: 'height' と等価であり、デフォルトで高さが自動調整されます。

videoWidth

String

動画の幅。詳細については、「表示モードの設定」をご参照ください。

videoHeight

String

動画の高さ。詳細については、「表示モードの設定」をご参照ください。

preload

Boolean

プレーヤーが自動的に読み込みを行います。

cover

String

プレーヤーのデフォルトサムネイル。有効な画像 URL を入力してください。このプロパティは、autoplay の値が false の場合にのみ有効です。

isLive

Boolean

コンテンツがライブストリームであるかどうかを指定します。ライブストリーミング中は、ユーザーによるプログレスバーのドラッグが禁止されます。デフォルト値は false です。ライブストリームを再生する場合は、このプロパティを true に設定してください。

autoplay

Boolean

プレーヤーが動画を自動再生するかどうかを指定します。autoplay プロパティはモバイル端末では機能しません。有効な値:

  • true:自動再生を有効化します。

  • false(デフォルト):自動再生を無効化します。

説明

ブラウザの制限により、ApsaraVideo Player SDK for Web では一部のシナリオで動画の自動再生が失敗することがあります。詳細については、「高度な機能」をご参照ください。

autoplayPolicy

Object

プレーヤーの適応型ミュート自動再生ポリシーです。この プロパティは、autoplaytrue に設定されている場合にのみ有効になります。設定例:

autoplayPolicy: {
  fallbackToMute: true, // 自動再生(音あり)が失敗した場合にミュート自動再生にフォールバックするかどうかを指定します。デフォルトは false です。
  showUnmuteBtn: true, // ミュート自動再生中に中央に大きなミュート解除ボタンを表示するかどうかを指定します。デフォルトは true です。
}
説明
  • ミュート再生が成功すると、mutedAutoplay イベントが発生します。

  • プレーヤーで自動再生が有効 (autoplaytrue に設定) で、アダプティブミュート自動再生も有効 (autoplayPolicy.fallbackToMutetrue に設定) の場合、プレーヤーはまず音声付きでの自動再生を試みます。失敗した場合は、ミュート自動再生の試行にフォールバックします。なお、ミュート自動再生は 100% の成功を保証するものではありません。

rePlay

Boolean

プレーヤーが自動的にループ再生します。

useH5Prism

Boolean

H5 プレーヤーの使用を指定します。

playsinline

Boolean

H5 再生をインライン表示するかどうかを指定します。一部の Android ブラウザでは機能しない場合があります。

skinRes

Url

スキン画像。このフィールドの変更は推奨されません。変更を行う場合は、「プレーヤー スキンの設定」をご参照ください。

skinLayout

Array | Boolean

機能コンポーネントのレイアウト構成。このフィールドを指定しない場合、デフォルトのレイアウトが使用されます。値が false の場合、すべての機能コンポーネントが非表示になります。詳細については、「skinLayout プロパティの構成」をご参照ください。

skinLayoutIgnore

Array

非表示にする UI コンポーネント。コンポーネント名については、「VOD コンポーネント パラメーターの説明」をご参照ください。設定例:

skinLayoutIgnore: [
  'bigPlayButton', // 大きな再生ボタンを非表示
  'controlBar.fullScreenButton' // コントロールバー上の全画面表示ボタンを非表示(ドット演算子でサブコンポーネントを選択)
]
説明

skinLayoutIgnore プロパティは skinLayout プロパティよりも優先度が高くなります。

controlBarVisibility

String

コントロールパネルの実装。値:

  • click:プレーヤー領域をクリックします。

  • hover(デフォルト):プレーヤー領域上にマウスポインタを移動します。

  • always:コントロールバーは常に表示されます。

  • never:コントロールバー全体が非表示になります。

showBarTime

Number

コントロールバーが自動的に非表示になるまでの時間。単位:ミリ秒。

enableSystemMenu

Boolean

システムの右クリックコンテキストメニューの表示を許可するかどうかを指定します。デフォルト値は false です。

format

String

再生 URL のフォーマットを指定します。有効な値:

  • mp4

  • hls または m3u8

  • flv

  • mp3

デフォルト値は空です。

mediaType

String

音声または動画を返すかどうかを指定します。これは Vid 基盤再生でのみサポートされます。デフォルト値は video です。有効な値:

  • video:動画。

  • audio:MP4 形式の音声ファイルなど、音声のみを含む動画形式。

qualitySort

String

並べ替え方法を指定します。これは Vid + PlayAuth を使用した再生でのみサポートされます。有効な値:

  • desc:降順(最大から最小へ)。

  • asc:昇順(最小から最大へ)。

デフォルト値: asc

definition

String

表示する動画の定義(解像度)。複数の値をカンマ(,)で区切り、例:'FD,LD'。この値は、vid に対応するストリーム定義のサブセットです。有効な値:

  • FD(低解像度)

  • LD(標準解像度)

  • HD(高解像度)

  • HD(超高解像度)

  • OD(オリジナル品質)

  • 2K(2K)

  • 4K(4K)

defaultDefinition

String

デフォルトの動画定義(解像度)。この値は、vid に対応するストリームの定義のいずれかです。有効な値:

  • FD(低解像度)

  • LD(標準解像度)

  • HD(高解像度)

  • HD(超高解像度)

  • OD(オリジナル品質)

  • 2K(2K)

  • 4K(4K)

autoPlayDelay

Number

遅延再生時間。単位:秒。

language

String

国際化の言語。デフォルト値は zh-cn です。未設定の場合、ブラウザの言語が使用されます。有効な値:

  • zh-cn:中国語。

  • en-us:英語。

languageTexts

JSON

カスタム国際化テキストの JSON 構造。キーの値は language プロパティの値と一致させる必要があります。例:{jp:{Play:"Play"}}。カスタム値の詳細については、「JSON 構造」をご参照ください。

snapshotWatermark

Object

H5 におけるスナップショットウォーターマークを設定します。

useHlsPluginForSafari

Boolean

Safari ブラウザ(Safari 11 を除く)での HLS 再生に HLS プラグインを有効化するかどうかを指定します。有効な値:

  • true:有効化します。

  • false(デフォルト):無効化します。

enableStashBufferForFlv

Boolean

H5 で FLV を再生する場合、再生キャッシュを有効化するかどうかを指定します。これはライブストリーミングでのみ機能します。有効な値:

  • true(デフォルト):有効化します。

  • false:無効化します。

stashInitialSizeForFlv

Number

H5 で FLV を再生する場合の初期キャッシュサイズ。これはライブストリーミングでのみ機能します。デフォルトは 32 KB です。

小さい値は起動速度を向上させますが、小さすぎると短時間の再生後に映像が途切れる可能性があります。

loadDataTimeout

Number

バッファリング時間が経過した後、ユーザーに低解像度への切り替えを促すまでの時間。単位:秒。デフォルトは 20 秒です。

waitingTimeout

Number

最大バッファタイムアウト。この時間を超過するとエラーが表示されます。単位:秒。デフォルトは 60 秒です。

diagnosisButtonVisible

Boolean

検出ボタンを表示するかどうかを指定します。有効な値:

  • true(デフォルト):ボタンを表示します。

  • false:ボタンを表示しません。

disableSeek

Boolean

プログレスバーのシーク操作を無効化します。有効な値:

  • true:無効化します。

  • false(デフォルト):無効化しません。

encryptType

Number

Alibaba Cloud 専用の暗号化で暗号化された動画を再生するかどうかを指定します。デフォルト値は 0 です。有効な値:

  • 0:暗号化されていない動画を再生します。

  • 1: 独自の暗号化技術で暗号化された動画を再生します。

説明
  • 専用暗号化では、VID+Playauth 方式で再生します。

  • Web 上の標準暗号化では、URL 方式で再生します。詳細については、「暗号化動画の再生」をご参照ください。

progressMarkers

Array

プログレスバーのマーカー用コンテンツの配列。詳細については、「プログレスバーのマーカー」をご参照ください。

vodRetry

Number

VOD 再生が失敗した場合のリトライ回数。デフォルトは 3 回です。

liveRetry

Number

ライブストリーム再生が失敗した場合のリトライ回数。デフォルトは 5 回です。

hlsFrameChasing

Boolean

HLS ライブストリーミングモードでフレーム同期を有効化するかどうかを指定します。有効な値:

  • true:フレーム同期を有効化します。

  • false(デフォルト):フレーム同期を有効化しません。

説明

このプロパティは、バージョン 2.21.0 より前の ApsaraVideo Player SDK for Web でのみ設定できます。 バージョン 2.21.0 以降で HLS ライブストリーミングモードのフレーム同期を設定するには、「hlsOption.maxLiveSyncPlaybackRate プロパティ」をご参照ください。

chasingFirstParagraph

Number

フレーム同期の第 1 段階。単位:秒。デフォルトは 20 秒です。

説明

このプロパティは、ApsaraVideo Player SDK for Web の 2.21.0 より前のバージョンでのみ設定できます。2.21.0 以降のバージョンでは、HLS ライブストリーミングモードでフレーム同期を設定するには、hlsOption.maxLiveSyncPlaybackRate プロパティをご参照ください。

chasingSecondParagraph

Number

フレーム同期の第 2 段階。単位:秒。デフォルトは 40 秒です。

説明

このプロパティは、バージョン 2.21.0 より前の ApsaraVideo Player SDK for Web でのみ設定できます。バージョン 2.21.0 以降で、HLS ライブストリーミングモードでフレーム同期を設定するには、hlsOption.maxLiveSyncPlaybackRate プロパティをご参照ください。

chasingFirstSpeed

Number

フレーム同期の第 1 段階の再生速度。デフォルトは 1.1 倍速です。

説明

このプロパティは、ApsaraVideo Player SDK for Web の 2.21.0 より前のバージョンでのみ設定できます。2.21.0 以降のバージョンでは、HLS ライブストリーミングモードでフレーム同期を設定するには、hlsOption.maxLiveSyncPlaybackRate プロパティをご参照ください。

chasingSecondSpeed

Number

フレーム同期の第 2 段階の再生速度。デフォルトは 1.2 倍速です。

説明

このプロパティは、2.21.0 より前のバージョンの ApsaraVideo Player SDK for Web でのみ設定できます。2.21.0 以降のバージョンでは、HLS ライブストリーミングモードでフレーム同期を設定するには、hlsOption.maxLiveSyncPlaybackRate プロパティをご参照ください。

hlsOption.maxLiveSyncPlaybackRate

Number

HLS ライブストリーミングモードで、ライブフレーム同期の再生速度を設定します。デフォルト値は 1 であり、これはフレーム同期が無効であることを意味します。

  • 設定例:

    hlsOption: {
      maxLiveSyncPlaybackRate: 1.5, // フレーム同期の再生速度を設定
      liveSyncDurationCount: 3 // フレーム同期をトリガーする遅延セグメント数を設定
    }
  • 例の意味:ライブストリームの遅延が 3 セグメントの期間を超えると、プレーヤーは 1.5 倍速で再生して、遅延を 3 セグメントまで縮めようとします。プレーヤーがネットワークの変化に対応するために一定のバッファーを必要とするため、liveSyncDurationCount の値は注意して変更してください。値が小さすぎると、カクつきが発生する可能性があります。

説明

このプロパティは、ApsaraVideo Player SDK for Web 2.21.0 以降でのみサポートされます。

flvFrameChasing

Boolean

FLV ライブストリーミングモードでフレーム同期を有効化するかどうかを指定します。有効な値:

  • true:フレーム同期を有効化します。

  • false:フレーム同期を有効化しません。

デフォルト値は false です。

keyShortCuts

Boolean

キーボードショートカットを有効化するかどうかを指定します。有効な値:

  • true:キーボードショートカットを有効化します。

  • false:キーボードショートカットを有効化しません。

デフォルト値は false です。

説明

左右の矢印キーで早戻し/早送りを制御します。上下の矢印キーで音量の増減を制御します。Space キーで動画の再生/一時停止を切り替えます。

keyFastForwardStep

Number

早送り/早戻しの再生時間。単位:秒。デフォルトは 10 秒です。

rtsFallback

Boolean

ブラウザが RTS をサポートしていない場合、または RTS ストリームフェッチングが失敗した場合、プレーヤーは自動的に FLV/HLS へのフォールバックを試行します。遅延が小さい FLV を優先します。ブラウザが FLV をサポートしていない場合は、HLS を選択します。

この機能はデフォルトで有効です。無効化する場合は false を渡してください。

rtsFallbackType

String

RTS がフォールバックするプロトコルを指定します。選択肢は HLS/FLV です。rtsFallbackType プロパティを指定しない場合、自動選択となります。プレーヤーは遅延が小さい FLV を優先します。ブラウザが FLV をサポートしていない場合は、HLS にフォールバックします。

rtsFallbackSource

String

プレーヤーのデフォルトフォールバックポリシーの使用を推奨します。ただし、フォールバック用の固定ストリームフェッチング URL を指定したい場合は、このプロパティを使用できます。

traceId

String

traceId はお客様独自のユーザー識別子です。公開インストゥルメンテーションに traceId を渡すことで、報告されたログの追跡を容易にします。通常、ApsaraVideo Player SDK ではログ報告がデフォルトで有効になっています。traceId を渡すことで、ユーザーを特定できます。渡さない場合、ApsaraVideo Player SDK はデフォルトで UUID(プレーヤー SDK によって生成される一意の識別子)を生成し、ブラウザのキャッシュに保存します。

説明

このプロパティは、ApsaraVideo Player SDK for Web 2.10.0 以降でサポートされます。

textTracks

Array

WebVTT 外部字幕を設定します。例:

textTracks: [
  { kind: 'subtitles', label: '中国語', src: 'caption_url', srclang: 'zh-CN', default: true },
	{ kind: 'subtitles', label: '英語 (米国)', src: 'caption_url', srclang: 'en-US' }
],

フィールドの説明:

  • kind:VTT の種類。有効な値は subtitles および captions です。

  • label:字幕の表示名。

  • srclang:字幕の言語。

  • src:字幕の URL。クロスドメインアクセスを許可する必要があります。

  • default:この字幕をデフォルト表示として設定するかどうかを指定します。有効な値は true および false です。このフィールドは ApsaraVideo Player SDK for Web 2.15.7 以降でサポートされます。

説明
  • このプロパティは、ApsaraVideo Player SDK for Web 2.12.0 以降でサポートされます。

  • WebVTT 外部字幕は、以下のブラウザでは現在サポートされていません:

    • IE

    • Android QQ ブラウザ、OPPO/OnePlus システムブラウザ

    • ビデオタグをハイジャックするその他のブラウザ

  • 字幕プロパティの詳細な説明については、HTML 仕様 をご参照ください。

  • 高度な字幕設定の詳細については、「外部字幕」をご参照ください。

ratio

Number

プレーヤーを固定比率でスケールするように設定します。たとえば、動画の縦横比が 16:9 の場合、プレーヤーのプロパティを width: "100%", ratio: 16/9 に設定すると、プレーヤーは動画コンテンツと同じ縦横比を維持し、ページのサイズに比例して自動的にスケールできます。

extLanguageTexts

Object

プレーヤー SDK には、中国語および英語の UI テキストが組み込まれています。このプロパティを使用して、一部のインターフェイスの表示テキストをカスタマイズできます。たとえば、解像度の表示テキストを変更する場合:デフォルトでは HDHigh Definition として表示されますが、以下のように HD1080p として表示するように変更できます。

extLanguageTexts: {
    'zh-cn': {
      'HD': "1080p"
    }
}

speedLevels

Array

カスタム速度リスト配列を設定します。key は速度値を表し、text は UI 表示テキストを表します。指定しない場合、デフォルトのリストが使用されます。例:

speedLevels: [
  {"key": 0.25, "text": "0.25"},
  {"key": 0.5, "text": "0.5"},
  {"key": 1, "text": "通常"},
  {"key": 1.25, "text": "1.25"},
  {"key": 1.5, "text": "1.5"},
  {"key": 2,"text": "2"}
]

logo

Array

カスタムロゴ画像を設定します。例:

    logo: [{
      width: 30,
      position: 'bottom-right',
      origin: 'content',
      src: 'a.png'
    },
    {
      width: 20,
      position: 'bottom-right',
      offsetY: -20,
      origin: 'content',
      src: 'b.png'
    }]

フィールドの説明:

  • src:ロゴ画像の URL。

  • origin:位置決めの基準。有効な値:

    • box:プレーヤー

    • content:動画コンテンツ

  • width/height:ロゴの幅/高さ(% 単位、origin を基準に計算)。片方のみ指定した場合、画像のアスペクト比に従ってもう一方がスケーリングされます。

  • position:ロゴの相対位置(origin を基準に位置決め)。有効な値:

    • top-left:左上

    • top-right:右上

    • bottom-left:左下

    • bottom-right:右下

  • offsetX/offsetY:position からのオフセット(% 単位、origin を基準に計算)。

license

Object

付加価値サービス (VAS) として、再生品質モニタリング(旧)シングルポイントトレーシング、およびH.265/H.266 エンコード動画ストリームの再生を使用するには、まず、ApsaraVideo Player SDK 付加価値サービス申請フォームを記入してライセンスを申請します。その後、以下の手順でライセンスを統合します:

// domain はライセンス申請時に記入したドメイン名です
// key はライセンスキーです
license: {
    domain: "example.com",
    key: "example-key"
  }

mute

Boolean

ミュート再生モードで再生するかどうかを設定します。ブラウザが自動再生を禁止している場合、ミュート自動再生のためにこのプロパティを設定できます。詳細については、「高度な機能」をご参照ください。

clickPause

Boolean

動画画面をクリックして再生/一時停止を切り替えます。

  • true:有効化します。

  • false:無効化します。

デフォルト値は PC では true、モバイル端末では false です。dbClickSkip プロパティと併用するとインタラクションの競合が発生するため、併用しないでください。

disablePip

Boolean

ブラウザの組み込み Picture-in-Picture(PiP)ボタンを非表示にします。

説明
  • このプロパティは、ApsaraVideo Player SDK for Web 2.20.0 以降でのみサポートされます。

  • このプロパティは、Firefox 116 以降でのみサポートされます。

env

String

プレーヤーのインストゥルメンテーションデータはデフォルトで中国のデータセンターにアップロードされます。中国以外の地域でデータコンプライアンス要件がある場合は、パラメーター env: 'SEA' を渡してください。データはシンガポールのデータセンターにアップロードされます。

watchStartTime

Number

単独で使用した場合、再生の開始時刻を表します。

watchEndTime と併用した場合、範囲再生機能を有効化します。再生およびプログレスバーのドラッグは、開始時刻と終了時刻の範囲内でのみ可能になります。

単位:秒

watchEndTime

Number

watchStartTime と併用して範囲再生機能を有効化します。再生およびプログレスバーのドラッグは、開始時刻と終了時刻の範囲内でのみ可能になります。

パラメーター値が watchStartTime より小さい場合、watchStartTime は無効になります。

単位:秒

start

Number

end と併用して、動画の一部を独立した動画としてクリップします。たとえば、元の動画が 60 秒の場合、start:10 および end:30 を設定すると、表示される動画の再生時間は 20 秒となり、元の動画の 10 秒目から再生を開始します。

end

Number

start と併用して、動画の一部を独立した動画としてクリップします。たとえば、元の動画が 60 秒の場合、start:10 および end:30 を設定すると、表示される動画の再生時間は 20 秒となり、元の動画の 10 秒目から再生を開始します。

dbClickFullscreen

Boolean

ダブルクリックで全画面表示モードに入る機能を有効化するかどうかを指定します。この機能は PC ではデフォルトで有効です。

longPressFastForward

Boolean

長押しによる早送り機能。この機能はモバイル端末のみで使用できます。有効な値:

  • true(デフォルト):有効化します。

  • false:無効化します。

dbClickSkip

Boolean

左側エリアをダブルクリックすると早戻し、右側エリアをダブルクリックすると早送りする機能。この機能はモバイル端末のみで使用できます。有効な値:

  • true(デフォルト):有効化します。

  • false:無効化します。

clickPause プロパティと併用するとインタラクションの競合が発生するため、併用しないでください。

enableMockFullscreen

Boolean

Web 全画面表示機能。デフォルトでは、プレーヤーはブラウザの全画面 API を呼び出します。iOS ブラウザおよび一部の Android ブラウザでは、システムプレーヤーが全画面モードを制御するため、UI が消えてしまうなどの問題が発生します。システムプレーヤーの制御を防ぐために、このプロパティを有効化して CSS を使用した疑似全画面モードを実装できます。デフォルト値は false です。

watermark

Object

動的ウォーターマークを設定します。例:

watermark: {
  enable: true,
  text: 'Copyright ©2026',
  mode: 'BULLET'
}

フィールドの説明:

  • enable:動的ウォーターマークを有効化するかどうかを指定します。

  • text:ウォーターマークのテキスト内容。

  • mode:ウォーターマークのモード。有効な値:

    • BULLET:マーケー(デフォルト)。

    • GHOST:ランダム点滅。

  • direction:移動方向。有効な値:

    • RTL:右から左へ(デフォルト)。

    • LTR:左から右へ。

    • STATIC:静止。GHOST モードでのみ有効です。

  • speed:移動速度。値の範囲は 0~100 です。値が大きいほど速度が速くなります。BULLET モードではデフォルト値が 50、GHOST モードではデフォルト値が 30 です。

  • interval:ウォーターマークが消えてから再び表示されるまでの間隔。デフォルト値は 3000(ミリ秒)です。

  • duration:GHOST モードでのみ有効です。ウォーターマークが一度に表示される時間。デフォルト値は 5000(ミリ秒)です。

  • opacity:ウォーターマークテキストの不透明度。値の範囲は 0~1 です。デフォルト値は 0.5 です。

  • fontSize:ウォーターマークテキストのフォントサイズ。CSS の font-size 値です。デフォルト値は 14px です。

  • fontColor:ウォーターマークテキストの色。任意の CSS カラー値がサポートされます。デフォルト値は #FFFFFF です。

  • top:コンテナの上端からウォーターマーク表示領域までの距離。画素値(例:50)またはパーセント値(例:'20%')を使用できます。

  • bottom:コンテナの下端からウォーターマーク表示領域までの距離。画素値またはパーセント値を使用できます。

  • left:コンテナの左端からウォーターマーク表示領域までの距離。画素値またはパーセント値を使用できます。GHOST モードでのみ有効です。

  • right:コンテナの右端からウォーターマーク表示領域までの距離。画素値またはパーセント値を使用できます。GHOST モードでのみ有効です。

メソッド

ready イベントが発生した後、またはプレーヤーコンストラクターの ready コールバック関数内でメソッドを呼び出すことができます。例:

// 方法 1:
var player = new Aliplayer({}, function (player) {
  player.play();
});

// 方法 2:
var player = new Aliplayer({});
function handleReady(player) {
  player.play();
};
player.on('ready', handleReady);

Aliplayer インスタンスに対して呼び出すことができる以下のメソッドがあります:

play()

動画を再生します。

関数定義

() => Player

pause()

動画を一時停止します。

(showPlayButton?: boolean) => Player

パラメーター

名前

パラメーター型

必須

説明

showPlayButton

Boolean

いいえ

再生ボタンを表示するかどうかを指定します。

replay()

動画を再度再生します。

関数定義

() => Player

seek()

指定した時刻にシークして再生を開始します。

関数定義

(time: number) => Player 

パラメーター

名前

パラメーター型

必須

説明

time

number

はい

ジャンプ先の時刻。単位:秒。

dispose()

プレーヤーを破棄します。

関数定義

() => void

getCurrentTime()

現在の再生時刻を取得します。戻り値は秒単位です。

関数定義

() => number

getDuration()

動画の総再生時間を取得します。戻り値は秒単位です。play イベントの後に初めて取得できます。

関数定義

() => number

getVolume()

現在の音量を取得します。戻り値は 0 ~ 1 の実数です。iOS および一部の Android デバイスでは機能しない場合があります。

関数定義

() => number | undefined

setVolume()

音量を設定します。

関数定義

(volume: number) => void

パラメーター

名前

パラメーター型

必須

説明

volume

number

はい

vol は 0 ~ 1 の実数です。iOS および一部の Android デバイスでは機能しない場合があります。

mute()

音声をミュートします。

関数定義

(quiet?: boolean) => Player

パラメーター

名前

パラメーター型

必須

説明

quiet

boolean

いいえ

ミュート時に左下隅に表示されるテキストプロンプトを非表示にするかどうかを指定します。

unMute()

音声のミュートを解除します。

関数定義

(quiet?: boolean) => Player

パラメーター

名前

パラメーター型

必須

説明

quiet

boolean

いいえ

ミュート解除時に左下隅に表示されるテキストプロンプトを非表示にするかどうかを指定します。

getPlayTime()

ユーザーの実際の再生時間を取得します。これは一時停止時間を除いたものであり、可変速度下での実際の物理時間を反映します。戻り値は秒単位です。

関数定義

() => number

loadByUrl()

動画を切り替えます。現在、このメソッドは同じフォーマット(MP4、HLS、FLV など)の動画間でのみ切り替えをサポートしています。異なるフォーマット間で切り替えるには、現在のインスタンスを破棄して新しいインスタンスを作成する必要があります。

関数定義

(url: string, seconds?: number, autoPlay?: boolean) => void

パラメーター

名前

パラメーター型

必須

説明

url

string

はい

切り替える動画の URL。

seconds

number

いいえ

切り替え後の開始位置。

autoPlay

boolean

いいえ

切り替え後に自動再生するかどうかを指定します。

replayByVidAndPlayAuth()

ビデオオンデマンド(VOD)動画を切り替えます。同じフォーマット間でのみ切り替えがサポートされます。

関数定義

(vid: string, playauth: string) => void

パラメーター

名前

パラメーター型

必須

説明

vid

string

はい

動画の ID。

playauth

string

はい

再生認証情報。

replayByVidAndAuthInfo()

ApsaraVideo Media Processing(MPS)動画を切り替えます。同じフォーマット間でのみ切り替えがサポートされます。

関数定義

(vid: string, accId: string, accSecret: string, stsToken: string, authInfo: string, domainRegion: string) => void

詳細については、「MPS 再生」をご参照ください。

replayByMediaAuth()

汎用メディアサービス動画を切り替えます。同じフォーマット間でのみ切り替えがサポートされます。

関数定義

(mediaAuth: string) => void

パラメーター

名前

パラメーター型

必須

説明

mediaAuth

string

はい

再生認証情報。

getBuildInComponent()

全画面表示ボタンやプログレスバーなどの組み込み UI コンポーネントを取得します。

関数定義

(name: string) => BuildInComponent;

パラメーター

名前

パラメーター型

必須

説明

name

string

はい

組み込みコンポーネントの名前(例:fullScreenButton)。詳細については、「skinLayout プロパティの構成」をご参照ください。各コンポーネントに対して hide() および show() メソッドを呼び出すことで、コンポーネントの非表示/表示を制御できます。

setPlayerSize()

プレーヤーサイズを設定します。

関数定義

(width: string, height: string) => void

パラメーター

名前

パラメーター型

必須

説明

width

string

はい

プレーヤーサイズを設定します。有効な値:

  • 400px

  • 60%

height

string

はい

setSpeed()

再生速度を手動で設定します。一部のモバイル端末(Android の WeChat など)では機能しない場合があります。速度制御 UI はデフォルトで有効です。

関数定義

(speed: number) => void

パラメーター

名前

パラメーター型

必須

説明

speed

number

はい

0.5 倍速~2 倍速の再生速度をサポートします。

説明

速度制御を無効化するには:

  • 現在、速度制御を個別に無効化またはカスタマイズすることはできません。全体の設定を無効化するしかありません。

  • 回避策としてスタイルをオーバーライドして速度制御を無効化できます:

    .prism-setting-speed {
       display: none !important;
     }

setTraceId()

ログ追跡のための公開インストゥルメンテーションポイントを渡します。

関数定義

(traceId: string) => void

パラメーター

名前

パラメーター型

必須

説明

traceId

string

はい

一意の識別 ID。

説明

このメソッドは、ApsaraVideo Player SDK for Web 2.10.0 以降でサポートされます。

setSnapshotProperties()

スナップショットパラメーターを設定します。

関数定義

(width: number, height: number, rate: number) => void

パラメーター

名前

パラメーター型

必須

説明

width

number

はい

高さと幅は px 単位です。スナップショット品質は 0 ~ 1 の数値です。デフォルトは 1 です。ビデオスナップショットの詳細な説明については、「ビデオスナップショット」をご参照ください。

height

number

はい

rate

number

はい

fullscreenService.requestFullScreen()

全画面表示モードに入ります。

関数定義

() => Player

fullscreenService.cancelFullScreen()

全画面表示モードを終了します。このメソッドは iOS では機能しません。

関数定義

() => Player

fullscreenService.getIsFullScreen()

プレーヤーの全画面表示ステータスを取得します。

関数定義

() => boolean

getStatus()

プレーヤーステータスを取得します。戻り値の型は String です。例:

  • init:初期化済み。

  • ready:準備完了。

  • loading:読み込み中。

  • 再生: 再生。

  • pause:一時停止中。

  • playing:再生中。

  • waiting:バッファー待ち中。

  • error:エラー発生。

  • 終了: 終了しました。

関数定義

() => string

liveShiftSerivce.setLiveTimeRange()

ライブストリームの開始時刻と終了時刻を設定します。タイムシフト機能を有効にする際にこのメソッドを使用します。

関数定義

(start: string, end: string) => void

パラメーター

名前

パラメーター型

必須

説明

start

string

はい

start:ライブストリームの開始時刻。

end

string

はい

end:ライブストリームの終了時刻。

player.liveShiftSerivce.setLiveTimeRange('2025/03/21 12:43:00', '2025/03/21 23:31:00')

setRotate()

プレーヤーの回転角度を設定します。

関数定義

(rotate: number) => void

パラメーター

名前

パラメーター型

必須

説明

rotate

number

はい

正の数は時計回り、負の数は反時計回りの回転を示します。例:setRotate(90)。詳細については、「表示モードの設定」をご参照ください。

getRotate()

プレーヤーの回転角度を取得します。

関数定義

() => number

詳細については、「表示モードの設定」をご参照ください。

setImage()

画像のミラーリングを設定します。

関数定義

(type: string) => void

パラメーター

名前

パラメーター型

必須

説明

type

string

はい

有効な値:

  • horizon:水平方向。

  • vertical:垂直方向。

例:setImage('horizon')。詳細については、「表示モードの設定」をご参照ください。

setCover()

サムネイルを設定します。

関数定義

(coverUrl: string) => void

パラメーター

名前

パラメーター型

必須

説明

coverUrl

string

はい

サムネイル URL。

setProgressMarkers()

マーカーを設定します。

関数定義

(markers: Array<{ time: number, text: string }>) => void

パラメーター

名前

パラメーター型

必須

説明

markers

Array<markers>

はい

markers:マーカーデータのコレクション。必須。

marker.time:マーカーの時刻。必須。

marker.text:マーカーのテキスト。必須。

詳細については progressMarkers プロパティをご参照ください。

setPreviewTime()

プレビュー時間を設定します。

関数定義

(time: number) => void

パラメーター

名前

パラメーター型

必須

説明

time

number

はい

単位:秒。詳細については、「プレビュー」をご参照ください。

getPreviewTime()

プレビュー時間を取得します。

関数定義

() => number

isPreview()

動画がプレビューであるかどうかを確認します。

関数定義

() => boolean

getCurrentPDT()

HLS 動画フォーマットの Program-Date-Time(PDT)をリアルタイムで取得することをサポートします。

関数定義

() => number | undefined

setTextTracks()

WebVTT 字幕のグループを設定します。

関数定義

(textTracks: Array<{ kind: string, label: string, src: string, srclang: string }>) => void

パラメーター

名前

パラメーター型

必須

説明

textTracks

Array<object>

はい

例:

player.setTextTracks([ { kind: 'subtitles', label: '中国語', src: 'caption_url', srclang: 'zh-CN' },{ kind: 'subtitles', label: '英語 (米国)', src: 'caption_url', srclang: 'en-US' }])
説明

このメソッドは、ApsaraVideo Player SDK for Web 2.12.0 以降でサポートされます。

setLogo()

カスタムロゴ画像を設定します。

関数定義

(logoList: Array<{ width: number, position: string, origin: string, src: string }>) => void

パラメーター

名前

パラメーター型

必須

説明

logoList

Array<object>

はい

例:

player.setLogo([{
      width: 30,
      position: 'bottom-right',
      origin: 'content',
      src: 'a.jpg'
    },
    {
      width: 20,
      position: 'bottom-right',
      offsetY: -20,
      origin: 'content',
      src: 'b.jpg'
    }])

各フィールドの詳細な説明については logo プロパティをご参照ください。

setWatchTime()

現在の動画の watchStartTime および watchEndTime を動的に更新します。

関数定義

(start: number, end: number) => void

パラメーター

名前

パラメーター型

必須

説明

start

string

はい

start:開始時刻。

end

string

はい

end:終了時刻。

setNextWatchTime()

次の動画の watchStartTime および watchEndTime を設定します。loadByUrl または replayByVidAndPlayAuth を使用して動画を切り替える際、次の動画の再生範囲が現在のものと異なる場合は、事前に setNextWatchTime を呼び出して次の動画の範囲を設定できます。

関数定義

(start: number, end: number) => void

パラメーター

名前

パラメーター型

必須

説明

start

string

はい

start:開始時刻。

end

string

はい

end:終了時刻。

setStartEnd()

現在の動画の開始点および終了点を動的に更新します。

関数定義

(start: number, end: number) => void

パラメーター

名前

パラメーター型

必須

説明

start

string

はい

start:開始時刻。

end

string

はい

end:終了時刻。

setNextStartEnd()

次の動画の開始点および終了点を設定します。loadByUrl または replayByVidAndPlayAuth を使用して動画を切り替える際、次の動画のクリッピング範囲が現在のものと異なる場合は、事前に setNextStartEnd を呼び出して次の動画の範囲を設定できます。

関数定義

(start: number, end: number) => void

パラメーター

名前

パラメーター型

必須

説明

start

string

はい

start:開始時刻。

end

string

はい

end:終了時刻。

takeSnapshot()

スナップショットを取得します。返される Base64 文字列は、そのまま img.src に読み込ませることができます。setSnapshotProperties を使用してスナップショット品質を設定し、snapshotWatermark を使用してスナップショットウォーターマークを設定できます。

注:一部のモバイルブラウザ(UC や QQ ブラウザなど)では、ビデオタグがハイジャックされるため、スナップショット機能が利用できない場合があります。

関数定義

() => { time: number, base64: string, binary: string, error: Error | null }

戻り値

名前

パラメーター型

説明

time

string

スナップショットの時刻。

base64

string

スナップショットの base64 コンテンツ。

binary

string

スナップショットコンテンツのバイナリ文字列。

error

Error

スナップショット例外の詳細。

showControlBar()

コントロールバーを表示します。

関数定義

() => void

hideControlBar()

コントロールバーを非表示にします。

関数定義

() => void

イベント

プレーヤーイベント

名前

説明

ready

プレーヤーの動画初期化ボタンのレンダリングが完了しました。プレーヤーの初期 UI 設定は、このイベント後にトリガーする必要があります。これにより、初期化によって上書きされてしまうことを回避できます。

説明

プレーヤーが提供するメソッドは、このイベントが発生した後でのみ呼び出すことができます。

play

動画が一時停止状態から再生を再開したときにトリガーされます。

pause

動画が一時停止されたときにトリガーされます。

canplay

音声および動画の再生が可能になったときに発生します。H5 プレーヤーに限定され、複数回トリガーされます。

playing

再生中に複数回トリガーされます。

ended

現在の動画の再生が完了したときにトリガーされます。

liveStreamStop

ライブストリームが中断されたときにトリガーされます。HLS ライブストリームの場合、5 回のリトライ失敗後にトリガーされます。上位レイヤーに対して、ストリームが中断されたか、動画を再読み込みする必要があることを通知します。

説明

HLS ライブストリームが中断またはエラーが発生した場合、プレーヤーは自動的に 5 回リトライします。上位レイヤーでリトライロジックを追加する必要はありません。

onM3u8Retry

HLS ライブストリームが中断された後のリトライイベント。中断ごとに 1 回のみトリガーされます。

hideBar

コントロールバーを自動的に非表示にするイベント。

showBar

コントロールバーは、イベントを自動的に表示します。

waiting

データバッファリングイベント。

timeupdate

再生位置が変更されたときにトリガーされます。getCurrentTime メソッドを使用して、現在の再生時刻を取得できます。

snapshoted

スナップショット完了イベント。

requestFullScreen

全画面表示イベント。

cancelFullScreen

全画面表示キャンセルイベント。iOS ではトリガーされません。

error

エラーイベント。

startSeek

ドラッグを開始します。パラメーターはドラッグポイントの時刻を返します。

completeSeek

ドラッグを完了します。パラメーターはドラッグポイントの時刻を返します。

resolutionChange

ライブストリームで、インジェストエンドポイントの解像度が切り替わりました。

seiFrame

HLS または FLV で SEI メッセージを受信しました。

rtsFallback

RTS がフォールバックしたときにトリガーされます。パラメーター reason はフォールバックの理由を示し、fallbackUrl はフォールバック先の URL です。

settingSelected

設定リスト内の項目(速度、解像度、字幕など)が選択されたときにトリガーされます。

説明

オープンソースの速度プラグインはプレーヤー設定と同期されないため、使用するにはカスタムコードと再コンパイルが必要です。イベントリスナーを定義できます。プレーヤーのsettingSelectedを使用するには、プラグインを削除する必要があります。

/**
 * 設定リストの項目が選択されました。たとえば、速度を 1.25X に切り替えた場合:
 * {name: 'Speed', type: 'speed', text: '1.25X', key: 1.25}
 */

rtsTraceId

RTS ストリームフェッチングが成功した場合にトリガーされます。このイベントをサブスクライブすると、RTS TraceId を取得できます。ログ出力では、パラメーター data.paramData の traceId フィールドがストリームフェッチングの TraceId となり、source が現在の RTS ストリームの再生 URL となります。

player.on('rtsTraceId', function(data) {
  console.log('[EVENT]rtsTraceId', data.paramData);
})

autoplay

自動再生が成功または失敗した場合にトリガーされます。コールバックパラメーター event.paramDatatrue の場合、自動再生が成功したことを意味します。false の場合、自動再生が失敗したことを意味し、再生にはユーザー操作が必要です。

mutedAutoplay

autoplayPolicy.fallbackToMutetrue に設定されている場合、ミュートされた自動再生が成功したときにこれが発生します。

videoUnavailable

動画再生中に、動画のエンコード形式がサポートされていないために黒画面が発生したときにトリガーされます。たとえば、H.265 をサポートしていないブラウザで動画を再生すると、黒画面になり音声のみが再生され、このイベントがトリガーされます。

イベントのサブスクライブ

  • プレーヤーインスタンスの on メソッドを通じてサブスクライブできます。例:

    function handleReady() {};
    player.on('ready', handleReady);
    // 一部のイベントは頻繁にトリガーされます。一度だけリッスンするには player.one を使用できます。
    player.one('canplay', () => {});
  • プレーヤーインスタンスの off メソッドを通じてサブスクライブを解除できます。例:

    player.off('ready',handleReady);