@@ -16,7 +16,7 @@ You can use video playback APIs to convert video data into visible signals, play
Note: Video playback requires hardware capabilities such as display, audio, and codec.
1. A third-party application obtains a surface ID from the Xcomponent.
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.
...
...
@@ -43,16 +43,18 @@ The full video playback process includes creating an instance, setting the URL,
For details about the **url** media source input types supported by **VideoPlayer**, see the [url attribute](../reference/apis/js-apis-media.md#videoplayer_attributes).
For details about how to create an Xcomponent, see [Xcomponent Creation](#Xcomponent).
For details about how to create an XComponent, see [XComponent Creation](#XComponent).
*Note: **SetSurface** must be called after the URL is set but before **Prepare** is called.
```js
importmediafrom'@ohos.multimedia.media'
importfileIOfrom'@ohos.fileio'
letvideoPlayer=undefined;// Used to store instances created by calling the createVideoPlayer API.
letsurfaceID=undefined;// Used to save the surface ID returned by the Xcomponent interface.
letsurfaceID=undefined;// Used to save the surface ID returned by the XComponent interface.
// 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.
@@ -184,9 +186,9 @@ import media from '@ohos.multimedia.media'
importfileIOfrom'@ohos.fileio'
letvideoPlayer=undefined;// Used to store instances created by calling the createVideoPlayer API.
letsurfaceID=undefined;// Used to save the surface ID returned by the Xcomponent interface.
letsurfaceID=undefined;// Used to save the surface ID returned by the XComponent interface.
// 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.
@@ -270,9 +272,9 @@ import media from '@ohos.multimedia.media'
importfileIOfrom'@ohos.fileio'
letvideoPlayer=undefined;// Used to store instances created by calling the createVideoPlayer API.
letsurfaceID=undefined;// Used to save the surface ID returned by the Xcomponent interface.
letsurfaceID=undefined;// Used to save the surface ID returned by the XComponent interface.
// 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.
@@ -391,9 +393,9 @@ import media from '@ohos.multimedia.media'
importfileIOfrom'@ohos.fileio'
letvideoPlayer=undefined;// Used to store instances created by calling the createVideoPlayer API.
letsurfaceID=undefined;// Used to save the surface ID returned by the Xcomponent interface.
letsurfaceID=undefined;// Used to save the surface ID returned by the XComponent interface.
// 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 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:
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:
```js
<xcomponentid='Xcomponent'
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**.
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**.
type='surface'
onload='LoadXcomponent'// Default interface for loading the Xcomponent.
onload='LoadXcomponent'// Default interface for loading the XComponent.
style="width:720px;height:480px;border-color:red;border-width:5px;">// Set the window width, height, and other attributes.