Video bubble
This element handles the display and the play/pause functionality for an individual video. This element uses the native embed video element.
Properties
| Name | Type | Description |
|---|---|---|
| src | string | URL of the video file |
| autoPlay | boolean | When set to true, the video will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading. |
| loop | boolean | When set to true, the video player will automatically seek back to the start upon reaching the end of the audio. |
| muted | boolean | when set to true, the audio will be initially silenced. |
| poster | string | A URL for an image to be shown while the video is downloading |
| videoStyle | VideoBubbleStyle | Styling properties and values of the element |
VideoBubbleStyle
Styling properties and values of the element
| Name | Description |
|---|---|
| width | Sets the width of the element |
| height | Sets the height of the element |
| border | Sets the border of the element |
| borderRadius | Sets the border radius of the element |
| background | Sets all background style properties at once, such as color, image, origin and size, or repeat method. Reference link |
Usage
- Javascript
import '@cometchat/uikit-elements';//import the web component package.
const videoURL = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
//use the element
<cometchat-video-bubble src={videoURL}></cometchat-video-bubble>