DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Mobile Visual Development Components Media components Mobile video

Mobile video

Updated at:
Copy as MD
My Favorites

The mobile video component plays videos in formats such as FLV and MP4. It supports auto-play, pause, volume adjustment, and full-screen playback.

Step 1: Add the component

  1. Create a mobile application. For more information, see Create a mobile application.

  2. In the mobile application editor, click the Components icon 组件 on the far left.

  3. (Optional) To set up the layout of your application page, add column components. For more information, see Horizontal and vertical columns.

  4. On the left side of the canvas, enter Mobile Video in the search box above the component list. Find the component and drag it onto the canvas.

    For more information about adding components, see Add a component.

    After you add the component, the Style panel on the right shows its configuration settings. These include the component name, visibility, opacity, margin, and dimensions (default width 320, height 180). In the Video Configuration area below, you can set the play mode (for example, video stream) and the source URL.

Step 2: Configure the data source

In the Style panel on the right, select a mode from the play mode drop-down list, and then configure the video source URL.

Important

  • Video streams support FLV and HLS formats. Video files support MP4, HLS, and FLV formats. A video file's URL must end with its file extension, such as https://domain/directory/filename.flv.

    When using this component in applications on iOS, WeChat, or QQ Browser, it is recommended to use the HLS format for video streams.

  • This component supports string return values.

  • If you specify both static data and dynamic data for a video source URL, the dynamic data takes precedence.

  • To prevent video data leakage, do not configure a public source URL if the application has network restrictions or the live stream has security limitations.

  • Static data

    In the source URL for stream or source URL for file input box, enter the video's URL.

  • Dynamic data

    Click the Configure Data Source icon 配置数据源 next to the source URL for stream or source URL for file input box, select a data source type, and click OK.

    Available data source types include device, API, application push, and page variable. The source URL for the stream or file updates in real time based on the selected data source.

Step 3: Configure styles

  1. Adjust the component's height, width, and position on the page. For more information, see General Styles.

  2. Preview and debug the component's data and appearance. For more information, see Preview and Debug.

Previous：PDFNext：Composite components