動画 - DingTalk Help Center

使用シーン

mp4 や mov など HTML ネイティブの動画リソースを再生するための動画コントロールです。

コンポーネントの例

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

属性	説明	タイプ	デフォルト
`autoplay`	自動再生。一部のシーンでは動作しない場合があります。	`boolean`	`false`
`canPlayThrough`	動画の読み込みが完了し、再生準備完了時にトリガーされます。	`(ctx: object) => void`	-
`controls`	コントロールバー。	`boolean`	`true`
`controlsList`	ネイティブコントロールバーをカスタマイズします。	`'nodownload' \| 'nofullscreen' \| 'noremoteplayback' \| 'disablePictureInPicture'`	-
`loop`	ループ再生。動画終了後に自動的にループするかどうか。	`boolean`	`false`
`muted`	動画をミュートするかどうか。	`boolean`	`false`
`onEnded`	動画終了時にトリガーされます。	`(ctx: object) => void`	-
`onEnterFullscreen`	フルスクリーン開始時にトリガーされます。	`(ctx: object) => void`	-
`onError`	再生エラー発生時にトリガーされます。	`(ctx: object) => void`	-
`onExitFullscreen`	フルスクリーン終了時にトリガーされます。	`(ctx: object) => void`	-
`onPause`	動画一時停止時にトリガーされます。	`(ctx: object) => void`	-
`onPlay`	再生開始時にトリガーされます。	`(ctx: object) => void`	-
`pipControls`	ピクチャーインピクチャー。Chrome および Safari のみで動作し、Firefox とモバイルでは非対応です。	`boolean`	`false`
`playbackRate`	再生速度リスト。	`array`	`[ 0.8, 1, 1.5, 2 ]`
`playbackRateControls`	再生速度コントロールを表示するかどうか。	`boolean`	`false`
`poster`	ポスター画像の URL。	`string`	-
`sizeFit`	表示ズームモード。	`'contain' \| 'fill' \| 'cover' \| 'scale-dowm' \| 'none'`	`'contain'`
`timeUpdate`	再生時間の更新時にトリガーされます。	`(ctx: object) => void`	-
`title`	ネイティブタイトル。HTML ネイティブの title 属性を設定し、マウスホバー時に表示されます。	`string`	-
`url`	動画 URL。	`string`	`'https://cloud.video.taobao.com/play/u/1804320196/p/1/e/6/t/1/287344840104.mp4'`
`volume`	音量レベル。最小値は 0、最大値は 1。	`number`	`1`
`volumeControls`	音量コントロールを表示するかどうか。	`boolean`	`true`