Volume
To add volume controls to your video you need a volumeButton and a volumeBar.
There is one volumeButton component
"volumeButton1"
Volume Button 1
There are two volumeBar components
"volumeBar1""volumeBar2"
Volume Bar 1
Volume Bar 2
Usage
item1: {
id: 'volumeButton1',
barId: 'volumeBar2',
volumeColor: '#a4c3f5',
barColor: "white",
buttonColor: "#a4c3f5",
scrubberColor: "#a4c3f5",
scrubberBorderColor: "white"
},
Properties
| Property Name | Required | Accepted Values | Description | Default |
|---|---|---|---|---|
| id | Yes | "volumeButton1" | Used to render a volumeButton. | undefined |
| buttonColor | No | Any hex or rgb color code | Changes the color of the volumeButton. | Calculated from controlsBar barColor property |
| barId | No (No volumeBar will be shown if this is undefined) | "volumeBar1" or "volumeBar2" | volumeBar1 is horizontal and volumeBar2 is vertical. | undefined |
| barColor | No | Any hex or rgb color code | Changes the background color of the volumeBar. | "white" |
| volumeColor | No | Any hex or rgb color code | Changes the color of the volumeBar volume progress. | "#4ab860" |
| scrubberColor | No | Any hex or rgb color code | Changes the color of the volumeBar scrubber (the circle at the end of the volume progress). | Same as the volumeColor if defined or "white" |
| scrubberBorderColor | No | Any hex or rgb color code | Changes the border color of the volumeBar scrubber. | A lightened version of the scrubberColor |
| hideOnMobile | No | true or false | Hides the volumeButton component when the video's width is less than 768px | false |
| marginLeft | No | A string css value for the marginLeft property, ex: '10px', '10rem' | Changes the left margin of the volumeButton | "0" |
| marginRight | No | A string css value for the marginRight property, ex: '10px', '10rem' | Changes the left margin of the volumeButton | "0" |