1# video 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zjsxstar--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9 10> **说明：** 11> 12> - 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 13> 14 15视频播放组件。 16 17 18## 子组件 19 20不支持。 21 22 23## 属性 24 25除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 26 27| 名称 | 类型 | 默认值 | 必填 | 描述 | 28| -------- | ------- | ----- | ---- | ---------------------------------------- | 29| muted | boolean | false | 否 | 视频是否静音播放。<br/>true：开启静音；<br/>false：关闭静音。 | 30| src | string | - | 否 | 播放视频内容的路径。 | 31| autoplay | boolean | false | 否 | 视频是否自动播放。<br/>true：开启自动播放；<br/>false：关闭自动播放。 | 32| controls | boolean | true | 否 | 控制视频播放的控制栏是否显示，如果设置为false，则不显示控制栏。默认为true，由系统决定显示或隐藏控制栏。 | 33 34 35## 样式 36 37除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 38 39| 名称 | 类型 | 默认值 | 必填 | 描述 | 40| ---------- | ------ | ------- | ---- | ---------------------------------------- | 41| object-fit | string | contain | 否 | 视频源的缩放类型，如果poster设置了值，那么此配置还会影响视频海报的缩放类型，可选值参考表 object-fit 类型说明。 | 42 43**表1** object-fit 类型说明 44 45| 类型 | 描述 | 46| ---- | ------------------------- | 47| fill | 不保持宽高比进行放大缩小，使得图片填充满显示边界。 | 48 49 50## 事件 51 52除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 53 54| 名称 | 参数 | 描述 | 55| ---------- | ---------------------------------------- | ------------------------------------- | 56| prepared | { duration: value }<sup>5+</sup> | 视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。 | 57| start | - | 播放时触发该事件。 | 58| pause | - | 暂停时触发该事件。 | 59| finish | - | 播放结束时触发该事件。 | 60| error | - | 播放失败时触发该事件。 | 61| seeking | { currenttime: value } | 操作进度条过程时上报时间信息，单位为s。 | 62| seeked | { currenttime: value } | 操作进度条完成后，上报播放时间信息，单位为s。 | 63| timeupdate | { currenttime: value } | 播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。 | 64 65 66## 方法 67 68除支持[通用方法](js-components-common-methods.md)外，还支持如下方法： 69 70| 名称 | 参数 | 描述 | 71| -------------- | ------------------------------------- | ----------------- | 72| start | - | 请求播放视频。 | 73| pause | - | 请求暂停播放视频。 | 74| setCurrentTime | { currenttime: value } | 指定视频播放的进度位置，单位为s。 | 75 76> **说明：** 77> 在attached组件生命周期回调后，可以调用上述组件方法。 78 79## 示例 80 81```html 82<!-- xxx.hml --> 83<div class="container"> 84 <!-- '/common/myDream.mp4'需要替换为开发者所需的视频资源文件 --> 85 <video id='videoId' src='/common/myDream.mp4' muted='false' autoplay='false' 86 controls='true' onprepared='preparedCallback' onstart='startCallback' 87 onpause='pauseCallback' onfinish='finishCallback' onerror='errorCallback' 88 onseeking='seekingCallback' onseeked='seekedCallback' 89 ontimeupdate='timeupdateCallback' 90 style="object-fit:fill; width:80%; height:400px;" 91 onclick="change_start_pause"> 92 </video> 93</div> 94``` 95 96```css 97/* xxx.css */ 98.container { 99 justify-content: center; 100 align-items: center; 101} 102``` 103 104```js 105// xxx.js 106export default { 107 data: { 108 event:'', 109 seekingtime:'', 110 timeupdatetime:'', 111 seekedtime:'', 112 isStart: true, 113 duration: '', 114 }, 115 preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;}, 116 startCallback:function(){ this.event = '视频开始播放';}, 117 pauseCallback:function(){ this.event = '视频暂停播放'; }, 118 finishCallback:function(){ this.event = '视频播放结束';}, 119 errorCallback:function(){ this.event = '视频播放错误';}, 120 seekingCallback:function(e){ this.seekingtime = e.currenttime; }, 121 timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, 122 change_start_pause: function() { 123 if(this.isStart) { 124 this.$element('videoId').pause(); 125 this.isStart = false; 126 } else { 127 this.$element('videoId').start(); 128 this.isStart = true; 129 } 130 }, 131} 132``` 133 134