You can use video playback APIs to convert video data into visible signals, play the signals using output devices, and manage playback tasks. This document describes the following video playback development scenarios: full-process, normal playback, video switching, and loop playback.
Note: Video playback requires hardware capabilities such as display, audio, and codec.
*注意：视频播放需要显示、音频、编解码等硬件能力。
1.A third-party application obtains a surface ID from the XComponent.
2.The third-party application transfers the surface ID to the VideoPlayer JS.
3.The media service flushes the frame data to the surface buffer.
1.三方应用从Xcomponent组件获取surfaceID。
2.三方应用把surfaceID传递给VideoPlayer JS。
3.媒体服务把帧数据flush给surface buffer。
## Compatibility
## 兼容性说明
You are advised to use the mainstream playback formats and resolutions, rather than custom or abnormal streams to avoid playback failure, frame freezing, and artifacts. The system is not affected by incompatibility issues. If such an error occurs, you can exit stream playback mode.
The full video playback process includes creating an instance, setting the URL, setting the surface ID, preparing for video playback, playing video, pausing playback, obtaining track information, seeking to a playback position, setting the volume, setting the playback speed, stopping playback, resetting the playback configuration, and releasing resources.
For details about the **url** media source input types supported by **VideoPlayer**, see the [url attribute](../reference/apis/js-apis-media.md#videoplayer_attributes).
// The LoadXcomponent() API is used to obtain the surface ID and save it to the **surfaceID** variable. This API is automatically called when the XComponent is loaded.
// The LoadXcomponent() API is used to obtain the surface ID and save it to the **surfaceID** variable. This API is automatically called when the XComponent is loaded.
// The LoadXcomponent() API is used to obtain the surface ID and save it to the **surfaceID** variable. This API is automatically called when the XComponent is loaded.
// The LoadXcomponent() API is used to obtain the surface ID and save it to the **surfaceID** variable. This API is automatically called when the XComponent is loaded.
// Call the prepare interface to prepare for playback.
// 调用prepare完成播放前准备工作
awaitvideoPlayer.prepare().then(()=>{
console.info('prepare success');
},failureCallback).catch(catchCallback);
// Set the loop playback attribute.
// 设置循环播放属性
videoPlayer.loop=true;
// Call the play interface to start playback.
// 调用play接口正式开始播放
awaitvideoPlayer.play().then(()=>{
console.info('play success');
},failureCallback).catch(catchCallback);
```
### XComponent Creation
### Xcomponent创建方法
The XComponent is used to obtain the surface ID during video playback. You need to create an xxx.hml file and add the following code to the xxx.hml file, where xxx is the same as that in the xxx.js file:
if="{{isFlush}}"// Refresh the surface ID. To enable automatic loading of the XComponent and obtain the new surface ID, assign **false** to **isFlush** and then assign **true** to **isFlush**.
