<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p58668224150"><aname="p58668224150"></a><aname="p58668224150"></a>Whether a video is muted.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p28661822121511"><aname="p28661822121511"></a><aname="p28661822121511"></a>Path of the video content to play.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1386610221157"><aname="p1386610221157"></a><aname="p1386610221157"></a>Whether a video is played automatically after being rendered.</p>
<tdclass="cellrowborder"valign="top"width="35.76%"headers="mcps1.1.6.1.5 "><pid="p1286742213153"><aname="p1286742213153"></a><aname="p1286742213153"></a>Whether the control bar is displayed during video playback. If the value is set to <strongid="b6147532141612"><aname="b6147532141612"></a><aname="b6147532141612"></a>false</strong>, the control bar is not displayed. The default value is <strongid="b161341542112813"><aname="b161341542112813"></a><aname="b161341542112813"></a>true</strong>, indicating that the platform can either show or hide the control bar.</p>
<tdclass="cellrowborder"valign="top"width="40.01599840015999%"headers="mcps1.1.6.1.5 "><pid="p1729184392013"><aname="p1729184392013"></a><aname="p1729184392013"></a>Scaling type of the video source. If <strongid="b11860175319429"><aname="b11860175319429"></a><aname="b11860175319429"></a>poster</strong> has been assigned a value, this configuration will affect the scaling type of the video poster. For details about available values, see <ahref="#t8eca568266d54af484fec0f84185e923">Table 1</a>.</p>
<tdclass="cellrowborder"valign="top"width="84.98%"headers="mcps1.2.3.1.2 "><pid="p958611356373"><aname="p958611356373"></a><aname="p958611356373"></a>The video content is resized to fill the display area and its aspect ratio is not retained.</p>
</td>
</tr>
</tbody>
</table>
## Events<a name="section4181420161817"></a>
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p1499513871918"><aname="p1499513871918"></a><aname="p1499513871918"></a>{ duration: value }<supid="sup29931815101312"><aname="sup29931815101312"></a><aname="sup29931815101312"></a>5+</sup></p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1399519841911"><aname="p1399519841911"></a><aname="p1399519841911"></a>Triggered when the video preparation is complete. The video duration (in seconds) is obtained from <strongid="b10248010272"><aname="b10248010272"></a><aname="b10248010272"></a>duration</strong>.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p8995182197"><aname="p8995182197"></a><aname="p8995182197"></a>Triggered when a video is played.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1699615891918"><aname="p1699615891918"></a><aname="p1699615891918"></a>Triggered when a video is paused.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p199688111910"><aname="p199688111910"></a><aname="p199688111910"></a>Triggered when the video playback is finished.</p>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p399615871913"><aname="p399615871913"></a><aname="p399615871913"></a>Triggered when the playback fails.</p>
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p6996118201915"><aname="p6996118201915"></a><aname="p6996118201915"></a>{ currenttime: value }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p1599615891917"><aname="p1599615891917"></a><aname="p1599615891917"></a>Triggered to report the time (in seconds) when the progress bar is being dragged.</p>
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p19996182197"><aname="p19996182197"></a><aname="p19996182197"></a>{ currenttime: value }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p109961085199"><aname="p109961085199"></a><aname="p109961085199"></a>Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.</p>
<tdclass="cellrowborder"valign="top"width="29.552955295529554%"headers="mcps1.1.4.1.2 "><pid="p4996386196"><aname="p4996386196"></a><aname="p4996386196"></a>{ currenttime: value }</p>
</td>
<tdclass="cellrowborder"valign="top"width="45.5945594559456%"headers="mcps1.1.4.1.3 "><pid="p179976820190"><aname="p179976820190"></a><aname="p179976820190"></a>Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.</p>
<tdclass="cellrowborder"valign="top"width="30%"headers="mcps1.1.4.1.3 "><pid="ad610eacf0ae748a0bd0611c6bd10d49d"><aname="ad610eacf0ae748a0bd0611c6bd10d49d"></a><aname="ad610eacf0ae748a0bd0611c6bd10d49d"></a>Starts playing a video.</p>
<tdclass="cellrowborder"valign="top"width="30%"headers="mcps1.1.4.1.3 "><pid="a4d7fc26ada3c4c9b86818e40259494e6"><aname="a4d7fc26ada3c4c9b86818e40259494e6"></a><aname="a4d7fc26ada3c4c9b86818e40259494e6"></a>Pauses a video.</p>
<tdclass="cellrowborder"valign="top"width="42%"headers="mcps1.1.4.1.2 "><pid="a65bc7bf0576a4e47bff523bd15ca560c"><aname="a65bc7bf0576a4e47bff523bd15ca560c"></a><aname="a65bc7bf0576a4e47bff523bd15ca560c"></a>{ currenttime: value }</p>
</td>
<tdclass="cellrowborder"valign="top"width="30%"headers="mcps1.1.4.1.3 "><pid="a421ac9c67d5444338709bb7be34d06ec"><aname="a421ac9c67d5444338709bb7be34d06ec"></a><aname="a421ac9c67d5444338709bb7be34d06ec"></a>Sets the video playback position, in seconds.</p>
| muted | boolean | false | No| Whether the video is muted.|
| src | string | - | No| Path of the video content to play.|
| autoplay | boolean | false | No| Whether the video is played automatically after being rendered.|
| controls | boolean | true | No| Whether the control bar is displayed during video playback. If the value is set to **false**, the control bar is not displayed. The default value is **true**, indicating that the platform can either show or hide the control bar.|
## Styles
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| object-fit | string | contain | No| Video scale type. If **poster** has been assigned a value, the setting of this style will affect the scaling type of the video poster. For details, see object-fit enums.|
**Table 1** object-fit enums
| Type| Description|
| -------- | -------- |
| fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| prepared | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| start | - | Triggered when the video is played.|
| pause | - | Triggered when the video playback is paused.|
| finish | - | Triggered when the video playback is finished.|
| error | - | Triggered when the video playback fails.|
| seeking | { currenttime: value } | Triggered to report the time (in seconds) when the progress bar is being dragged.|
| seeked | { currenttime: value } | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
| timeupdate | { currenttime: value } | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
## Methods
In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| start | - | Starts playing a video.|
| pause | - | Pauses a video.|
| setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
> **NOTE**<br>
> The methods in the above table can be called after the **attached** callback is invoked.
| type | ToggleType | Yes | - | Type of the toggle. |
| isOn | boolean | No | false | Initial state of the toggle.<br/>**NOTE**<br/>If **isOn** is not set during component creation, the selected state can be retained during component reuse. If **isOn** is set, the selected state needs to be retained during component reuse after the selected state is recorded using an event method. |
| type | ToggleType | Yes| - | Type of the toggle.|
| isOn | boolean | No| false | Whether the toggle is turned on. The value **true** means that the toggle is turned on, and **false** means the opposite.|
- ToggleType enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Checkbox | A checkbox is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
| Button | A button is provided. If the text setting is available, the corresponding text content is displayed inside the button. |
| Switch | A switch is provided. The text setting of the child component does not take effect. If the text setting is required, you can place the **<Text>** component and the current component in the layout component. |
| Checkbox | A checkbox is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 14 vp,<br> right: 6 vp,<br> bottom: 14 vp,<br> left: 6 vp<br> } |
| Button | A button is provided. The set text string, if any, will be displayed inside the button.|
| Switch | A switch is provided, where the **\<Text>** settings can take effect only when it is placed with the current component in a layout component.<br>> **NOTE**<br><br>> The default value of the universal attribute [padding](ts-universal-attributes-size.md) is as follows:<br>{<br> top: 12 vp,<br> right: 12 vp,<br> bottom: 12 vp,<br> left: 12 vp<br> } |
## Attributes
| Name | Type | Default Value | Description |
| Name| Parameter| Default Value| Description|
| -------- | -------- | -------- | -------- |
| selectedColor | Color | - | Background color of the toggle when it is enabled. |
| switchPointColor | Color | - | Color of the circular slider of the **Switch** type.<br/>**NOTE**<br/>This attribute is valid only when type is set to **ToggleType.Switch**. |
| selectedColor | Color | - | Background color of the component when it is turned on.|
| switchPointColor | Color | - | Color of the circular slider when the component is of the **Switch** type.<br>> **NOTE**<br>> This attribute is valid only when **type** is set to **ToggleType.Switch**. |
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onChange(callback: (isOn: boolean) => void) | Triggered when the switch status changes. |
| onChange(callback: (isOn: boolean) => void) | Triggered when the toggle status changes.|
