Autoplay, No controls

Must be muted


Contains all controls


API


Video

import Video from '@uixkit.react/components/Video/index.tsx';
PropertyTypeDefaultDescription
configJSON Object Literals-Detailed animation parameters, using JSON string format.
default value:
{"muted":false,"autoplay":false,"controls":["play-large", "play", "progress", "current-time", "mute", "volume", "captions", "settings", "pip", "airplay", "fullscreen"],"loop":{"active":false}}
other:
{"clickToPlay":false,"muted":true,"autoplay":true,"controls":[""],"loop":{"active":true},"fullscreen":{"enabled": false}}
posterstring-The poster image should be specified.
srcstring-The URL of the video to embed.

JSON configuration properties of the config:

PropertyTypeDefaultDescription
mutedbooleanfalseWhether to start playback muted. If the muted attribute is present on a <video> or <audio> element, this will be automatically set to true.
autoplaybooleanfalseAutoplay the media on load. If the autoplay attribute is present on a <video> or <audio> element, this will be automatically set to true.
controlsarray-When present, it specifies that video controls should be displayed.
default value:
["play-large", "play", "progress", "current-time", "mute", "volume", "captions", "settings", "pip", "airplay", "fullscreen"]
loopJSON Object Literals-active: Whether to loop the current video. If the loop attribute is present on a <video> or <audio> element, this will be automatically set to true This is an object to support future functionality.
default value:
{ active: false }
clickToPlaybooleantrueClick (or tap) of the video container will toggle play/pause.
fullscreenJSON Object Literals-enabled: Toggles whether fullscreen should be enabled. fallback: Allow fallback to a full-window solution (true/false/'force'). iosNative: whether to use native iOS fullscreen when entering fullscreen (no custom controls). container: A selector for an ancestor of the player element, allows contextual content to remain visual in fullscreen mode. Non-ancestors are ignored.
default value:
{ enabled: true, fallback: true, iosNative: false, container: null }