1# Video Playback (Video)
2
3
4The **Video** component is used to play a video and control its playback. It is usually used in video players and video list pages within applications. A video automatically plays once fully loaded. When the user clicks the video area, the video is paused and the playback progress bar is displayed. The user can drag the progress bar to the desired position. For details, see [Video](../reference/apis-arkui/arkui-ts/ts-media-components-video.md).
5
6
7## Creating a Video Component
8
9You can create a **Video** component by calling the following API:
10
11Video(value: VideoOptions)
12
13A **VideoOptions** object contains the **src**, **currentProgressRate**, **previewUri**, and **controller** parameters. In this API, **src** indicates the path of the video source, **currentProgressRate** indicates the video playback speed, **previewUri** indicates the path of the preview image, and **controller** indicates the video controller . For details about how to load a video, see [Loading Video](#loading-video). For details about **VideoOptions**, see [VideoOptions](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#videooptions).
14
15
16## Loading Video
17
18The **Video** component supports both local and online videos.
19
20
21### Loading a Local Video
22
23- Common local video
24
25  To load a local video, specify the corresponding video file in the local **rawfile** directory, as shown in the following figure.
26
27  ![en-us_image_0000001562700409](figures/en-us_image_0000001562700409.png)
28
29  Use **$rawfile()** to reference the video resource.
30
31  ```ts
32  @Component
33  export struct VideoPlayer{
34    private controller:VideoController | undefined;
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- Video provided by a [DataAbility](../application-models/dataability-overview.md), whose path contains the **dataability://** prefix<br>Ensure that the corresponding video resource exists.
51
52  ```ts
53  @Component
54  export struct VideoPlayer{
55     private controller:VideoController | undefined;
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### Loading a Video in the Application Sandbox
71
72To load a video in the application sandbox, use a string with the **file:///data/storage** prefix. Ensure that there are files in the specified path and the application has the read permission to the files.
73
74```ts
75@Component
76export struct VideoPlayer {
77  private controller: VideoController | undefined;
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### Loading an Online Video
93
94To load online videos, you must apply for the **ohos.permission.INTERNET** permission. For details about how to apply for the permission, see [Declaring Permissions](../security/AccessToken/declare-permissions.md). In this scenario, the **src** attribute indicates the URL of the online video.
95
96
97```ts
98@Component
99export struct VideoPlayer{
100  private controller:VideoController | undefined;
101  private previewUris: Resource = $r ('app.media.preview');
102  private videoSrc: string= 'https://www.example.com/example.mp4' // Replace the URL with that of the actual video to load.
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## Adding Attributes
117
118Use the [attributes](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#attributes) of the **Video** component to control video playback. For example, you can set whether to mute the video and whether to display the video playback control bar.
119
120
121```ts
122@Component
123export struct VideoPlayer {
124  private controller: VideoController | undefined;
125
126  build() {
127    Column() {
128      Video({
129        controller: this.controller
130      })
131        .muted(false) // Set whether to mute the video.
132        .controls(false) // Set whether to display the video playback control bar.
133        .autoPlay(false) // Set whether to enable auto play.
134        .loop(false) // Set whether to repeat the video.
135        .objectFit(ImageFit.Contain) // Set the video scale type.
136    }
137  }
138}
139```
140
141
142## Adding Events
143
144  The **Video** component supports various callback events in addition to the universal events. For details, see [Events](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#events).
145
146```ts
147@Entry
148@Component
149struct VideoPlayer{
150  private controller:VideoController | undefined;
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) => {   // Triggered when the playback progress changes.
161          console.info("Video update.");
162        })
163        .onPrepared((event) => {  // Triggered when video preparation is complete.
164          console.info("Video prepared.");
165        })
166        .onError(() => {          // Triggered when the video playback fails.
167          console.info("Video error.");
168        })
169        .onStop(() => {          // Stop event callback.
170          console.info("Video stoped.");
171        })
172    }
173  }
174}
175```
176
177
178## Using the Video Controller
179
180The video controller is used to control video playback. For details, see [VideoController](../reference/apis-arkui/arkui-ts/ts-media-components-video.md#videocontroller).
181
182- Default controller
183
184  The default controller supports four basic features: start playback, pause playback, set the video playback position, and play the video in full screen.
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- Custom controller
210
211  To use a custom controller, disable the default controller, and then use components such as **Button** and **Slider** to customize the control and display. This type of controller is applicable to scenarios where customization requirements are involved.
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## Remarks
271
272The **Video** component has encapsulated the basic capabilities of video playback. You do not need to create video instances or set and obtain video information. Simply set the data source and basic information to play videos. To customize video playback, see [Using AVPlayer to Play Videos](../media/media/video-playback.md).
273