1# 视频播放 (Video)
2
3
4Video组件用于播放视频文件并控制其播放状态，常用于为短视频和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。具体用法请参考[Video](../reference/apis-arkui/arkui-ts/ts-media-components-video.md)。
5
6
7## 创建视频组件
8
9Video通过调用接口来创建，接口调用形式如下：
10
11Video(value: VideoOptions)
12
13VideoOptions对象包含参数src、currentProgressRate、previewUri、controller。其中，src指定视频播放源的路径，加载方式请参考[加载视频资源](#加载视频资源)，currentProgressRate用于设置视频播放倍速，previewUri指定视频未播放时的预览图片路径，controller设置视频控制器，用于自定义控制视频。具体用法请参考[VideoOptions对象说明](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#videooptions对象说明)。
14
15
16## 加载视频资源
17
18Video组件支持加载本地视频和网络视频。
19
20
21### 加载本地视频
22
23- 普通本地视频。
24
25  加载本地视频时，首先在本地rawfile目录指定对应的文件，如下图所示。
26
27  ![zh-cn_image_0000001562700409](figures/zh-cn_image_0000001562700409.png)
28
29  再使用资源访问符$rawfile()引用视频资源。
30
31  ```ts
32  @Component
33  export struct VideoPlayer{
34    private controller:VideoController = new VideoController();
35    private previewUris: Resource = $r ('app.media.preview');
36    private innerResource: Resource = $rawfile('videoTest.mp4');
37    build(){
38      Column() {
39        Video({
40          src: this.innerResource,
41          previewUri: this.previewUris,
42          controller: this.controller
43        })
44      }
45    }
46  }
47  ```
48
49
50- [Data Ability](../application-models/dataability-overview.md)提供的视频路径带有dataability://前缀，使用时确保对应视频资源存在即可。
51
52  ```ts
53  @Component
54  export struct VideoPlayer{
55     private controller:VideoController = new VideoController();
56     private previewUris: Resource = $r ('app.media.preview');
57     private videoSrc: string = 'dataability://device_id/com.domainname.dataability.videodata/video/10'
58     build(){
59       Column() {
60         Video({
61           src: this.videoSrc,
62           previewUri: this.previewUris,
63           controller: this.controller
64         })
65     }
66   }
67  }
68  ```
69
70### 加载沙箱路径视频
71
72支持file:///data/storage路径前缀的字符串，用于读取应用沙箱路径内的资源，需要保证应用沙箱目录路径下的文件存在并且有可读权限。
73
74```ts
75@Component
76export struct VideoPlayer {
77  private controller: VideoController = new VideoController();
78  private videoSrc: string = 'file:///data/storage/el2/base/haps/entry/files/show.mp4'
79
80  build() {
81    Column() {
82      Video({
83        src: this.videoSrc,
84        controller: this.controller
85      })
86    }
87  }
88}
89```
90
91
92### 加载网络视频
93
94加载网络视频时，需要申请权限ohos.permission.INTERNET，具体申请方式请参考[声明权限](../security/AccessToken/declare-permissions.md)。此时，Video的src属性为网络视频的链接。
95
96
97```ts
98@Component
99export struct VideoPlayer{
100  private controller:VideoController = new VideoController();
101  private previewUris: Resource = $r ('app.media.preview');
102  private videoSrc: string= 'https://www.example.com/example.mp4' // 使用时请替换为实际视频加载网址
103  build(){
104    Column() {
105      Video({
106        src: this.videoSrc,
107        previewUri: this.previewUris,
108       controller: this.controller
109      })
110    }
111  }
112}
113```
114
115
116## 添加属性
117
118Video组件[属性](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#属性)主要用于设置视频的播放形式。例如设置视频播放是否静音、播放是否显示控制条等。
119
120
121```ts
122@Component
123export struct VideoPlayer {
124  private controller: VideoController = new VideoController();
125
126  build() {
127    Column() {
128      Video({
129        controller: this.controller
130      })
131        .muted(false) //设置是否静音
132        .controls(false) //设置是否显示默认控制条
133        .autoPlay(false) //设置是否自动播放
134        .loop(false) //设置是否循环播放
135        .objectFit(ImageFit.Contain) //设置视频适配模式
136    }
137  }
138}
139```
140
141
142## 事件调用
143
144  Video组件回调事件主要为播放开始、暂停结束、播放失败、播放停止、视频准备和操作进度条等事件，除此之外，Video组件也支持通用事件的调用，如点击、触摸等事件的调用。详细事件请参考[事件说明](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#事件)。
145
146```ts
147@Entry
148@Component
149struct VideoPlayer{
150  private controller:VideoController = new VideoController();
151  private previewUris: Resource = $r ('app.media.preview');
152  private innerResource: Resource = $rawfile('videoTest.mp4');
153  build(){
154    Column() {
155      Video({
156        src: this.innerResource,
157        previewUri: this.previewUris,
158        controller: this.controller
159      })
160        .onUpdate((event) => {   //更新事件回调
161          console.info("Video update.");
162        })
163        .onPrepared((event) => {  //准备事件回调
164          console.info("Video prepared.");
165        })
166        .onError(() => {          //失败事件回调
167          console.info("Video error.");
168        })
169        .onStop(() => {          //停止事件回调
170          console.info("Video stoped.");
171        })
172    }
173  }
174}
175```
176
177
178## Video控制器使用
179
180Video控制器主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等，详细使用请参考[VideoController使用说明](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#videocontroller)。
181
182- 默认控制器
183
184  默认的控制器支持视频的开始、暂停、进度调整、全屏显示四项基本功能。
185
186  ```ts
187  @Entry
188  @Component
189  struct VideoGuide {
190    @State videoSrc: Resource = $rawfile('videoTest.mp4')
191    @State previewUri: string = 'common/videoIcon.png'
192    @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
193    build() {
194      Row() {
195        Column() {
196          Video({
197            src: this.videoSrc,
198            previewUri: this.previewUri,
199            currentProgressRate: this.curRate
200          })
201        }
202        .width('100%')
203      }
204      .height('100%')
205    }
206  }
207  ```
208
209- 自定义控制器
210
211  使用自定义的控制器，先将默认控制器关闭掉，之后可以使用button以及slider等组件进行自定义的控制与显示，适合自定义较强的场景下使用。
212
213  ```ts
214  @Entry
215  @Component
216  struct VideoGuide1 {
217    @State videoSrc: Resource = $rawfile('videoTest.mp4')
218    @State previewUri: string = 'common/videoIcon.png'
219    @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X
220    @State isAutoPlay: boolean = false
221    @State showControls: boolean = true
222    @State sliderStartTime: string = '';
223    @State currentTime: number = 0;
224    @State durationTime: number = 0;
225    @State durationStringTime: string ='';
226    controller: VideoController = new VideoController()
227
228    build() {
229      Row() {
230        Column() {
231          Video({
232            src: this.videoSrc,
233            previewUri: this.previewUri,
234            currentProgressRate: this.curRate,
235            controller: this.controller
236          }).controls(false).autoPlay(true)
237          .onPrepared((event)=>{
238            if(event){
239              this.durationTime = event.duration
240            }
241          })
242          .onUpdate((event)=>{
243            if(event){
244              this.currentTime =event.time
245            }
246          })
247          Row() {
248            Text(JSON.stringify(this.currentTime) + 's')
249            Slider({
250              value: this.currentTime,
251              min: 0,
252              max: this.durationTime
253            })
254            .onChange((value: number, mode: SliderChangeMode) => {
255                this.controller.setCurrentTime(value);
256              }).width("90%")
257            Text(JSON.stringify(this.durationTime) + 's')
258          }
259          .opacity(0.8)
260          .width("100%")
261        }
262        .width('100%')
263      }
264      .height('40%')
265    }
266  }
267  ```
268
269
270## 其他说明
271
272Video组件已经封装好了视频播放的基础能力，开发者无需进行视频实例的创建，视频信息的设置获取，只需要设置数据源以及基础信息即可播放视频，相对扩展能力较弱。如果开发者想自定义视频播放，请参考[视频播放](../media/media/video-playback.md)。
273
274## 相关实例
275
276针对Video组件开发，有以下相关实例可供参考：
277
278- [ 媒体库视频（ArkTS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/VideoShow)
279
280- [简易视频播放器（ArkTS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/SimpleVideo)
281<!--RP1--><!--RP1End-->