1# video
2
3
4>  **说明：**
5>
6>  - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
7>
8
9视频播放组件。
10
11
12## 子组件
13
14不支持。
15
16
17## 属性
18
19除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性：
20
21| 名称       | 类型      | 默认值   | 必填   | 描述                                       |
22| -------- | ------- | ----- | ---- | ---------------------------------------- |
23| muted    | boolean | false | 否    | 视频是否静音播放。                                |
24| src      | string  | -     | 否    | 播放视频内容的路径。                               |
25| autoplay | boolean | false | 否    | 视频是否自动播放。                                |
26| controls | boolean | true  | 否    | 控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。 |
27
28
29## 样式
30
31除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
32
33| 名称         | 类型     | 默认值     | 必填   | 描述                                       |
34| ---------- | ------ | ------- | ---- | ---------------------------------------- |
35| object-fit | string | contain | 否    | 视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表 object-fit 类型说明。 |
36
37**表1** object-fit 类型说明
38
39| 类型   | 描述                        |
40| ---- | ------------------------- |
41| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 |
42
43
44## 事件
45
46除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
47
48| 名称         | 参数                                       | 描述                                    |
49| ---------- | ---------------------------------------- | ------------------------------------- |
50| prepared   | {&nbsp;duration:&nbsp;value&nbsp;}<sup>5+</sup> | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。 |
51| start      | -                                        | 播放时触发该事件。                             |
52| pause      | -                                        | 暂停时触发该事件。                             |
53| finish     | -                                        | 播放结束时触发该事件。                           |
54| error      | -                                        | 播放失败时触发该事件。                           |
55| seeking    | {&nbsp;currenttime:&nbsp;value&nbsp;}    | 操作进度条过程时上报时间信息，单位为s。                  |
56| seeked     | {&nbsp;currenttime:&nbsp;value&nbsp;}    | 操作进度条完成后，上报播放时间信息，单位为s。               |
57| timeupdate | {&nbsp;currenttime:&nbsp;value&nbsp;}    | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。       |
58
59
60## 方法
61
62除支持[通用方法](js-components-common-methods.md)外，还支持如下方法：
63
64| 名称             | 参数                                    | 描述                |
65| -------------- | ------------------------------------- | ----------------- |
66| start          | -                                     | 请求播放视频。           |
67| pause          | -                                     | 请求暂停播放视频。         |
68| setCurrentTime | {&nbsp;currenttime:&nbsp;value&nbsp;} | 指定视频播放的进度位置，单位为s。 |
69
70>  **说明：**
71>  在attached组件生命周期回调后，可以调用上述组件方法。
72
73## 示例
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 = '视频连接成功'; this.duration = e.duration;},
109  startCallback:function(){ this.event = '视频开始播放';},
110  pauseCallback:function(){ this.event = '视频暂停播放'; },
111  finishCallback:function(){ this.event = '视频播放结束';},
112  errorCallback:function(){ this.event = '视频播放错误';},
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
127