• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# video
2
3
4>  **NOTE**
5>
6>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
7
8The **\<video>** component provides a video player.
9
10
11## Child Components
12
13Not supported
14
15
16## Attributes
17
18In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
19
20| Name      | Type     | Default Value  | Mandatory  | Description                                      |
21| -------- | ------- | ----- | ---- | ---------------------------------------- |
22| muted    | boolean | false | No   | Whether the video is muted.                               |
23| src      | string  | -     | No   | Path of the video content to play.                              |
24| autoplay | boolean | false | No   | Whether the video is played automatically after being rendered.                               |
25| 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.|
26
27
28## Styles
29
30In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
31
32| Name        | Type    | Default Value    | Mandatory  | Description                                      |
33| ---------- | ------ | ------- | ---- | ---------------------------------------- |
34| 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.|
35
36**Table 1** object-fit enums
37
38| Type  | Description                       |
39| ---- | ------------------------- |
40| fill | The image is resized to fill the display area, and its aspect ratio is not retained.|
41
42
43## Events
44
45In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
46
47| Name        | Parameter                                      | Description                                   |
48| ---------- | ---------------------------------------- | ------------------------------------- |
49| prepared   | { duration: value }<sup>5+</sup> | Triggered when the video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
50| start      | -                                        | Triggered when the video is played.                            |
51| pause      | -                                        | Triggered when the video playback is paused.                            |
52| finish     | -                                        | Triggered when the video playback is finished.                          |
53| error      | -                                        | Triggered when the video playback fails.                          |
54| seeking    | { currenttime: value }    | Triggered to report the time (in seconds) when the progress bar is being dragged.                 |
55| seeked     | { currenttime: value }    | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.              |
56| timeupdate | { currenttime: value }    | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.      |
57
58
59## Methods
60
61In addition to the [universal methods](../arkui-js/js-components-common-methods.md), the following methods are supported.
62
63| Name            | Parameter                                   | Description               |
64| -------------- | ------------------------------------- | ----------------- |
65| start          | -                                     | Starts playing a video.          |
66| pause          | -                                     | Pauses a video.        |
67| setCurrentTime | { currenttime: value } | Sets the video playback position, in seconds.|
68
69>  **NOTE**
70>
71>  The methods in the above table can be called after the **attached** callback is invoked.
72
73## Example
74
75```html
76<!-- xxx.hml -->
77<div class="container">
78  <video id='videoId' src='/common/myDeram.mp4' muted='false' autoplay='false'
79         controls='true' onprepared='preparedCallback' onstart='startCallback'
80         onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback'
81         onseeking='seekingCallback' onseeked='seekedCallback'
82         ontimeupdate='timeupdateCallback'
83         style="object-fit:fill; width:80%; height:400px;"
84         onclick="change_start_pause">
85   </video>
86</div>
87```
88
89```css
90/* xxx.css */
91.container {
92  justify-content: center;
93  align-items: center;
94}
95```
96
97```js
98// xxx.js
99export default {
100  data: {
101    event:'',
102    seekingtime:'',
103    timeupdatetime:'',
104    seekedtime:'',
105    isStart: true,
106    duration: '',
107  },
108  preparedCallback:function(e){ this.event = 'Video successfully connected'; this.duration = e.duration;},
109  startCallback:function(){this.event = 'Playback starts.';},
110  pauseCallback:function(){this.event = 'Playback pauses.';},
111  finishCallback:function(){this.event = 'Playback ends.';},
112  errorCallback:function(){this.event = 'Playback error.';},
113  seekingCallback:function(e){ this.seekingtime = e.currenttime; },
114  timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},
115  change_start_pause: function() {
116    if(this.isStart) {
117      this.$element('videoId').pause();
118      this.isStart = false;
119    } else {
120      this.$element('videoId').start();
121      this.isStart = true;
122    }
123  },
124}
125```
126