VideoPlayer Component Reference

    Playing a local video:

    Playing a remote video:

    videoplayer-remote

    Click Add Component at the bottom of Properties panel and select VideoPlayer from UI Component to add the VideoPlayer component to the node.

    For more information about VideoPlayer‘s scripting interface, please refer to the VideoPlayer API documentation.

    For more information, please refer to the documentation or the 21.video-player example in the test-cases-3d samples bundled with Cocos Creator.

    The supported video types is mp4 format.

    Method one

    This method uses the same API that editor uses to add an event callback on Button component. You need to construct a Component.EventHandler object first, and then set the corresponding target, component, and customEventData parameters.

    Method two

    Add event callback with videoplayer.node.on(VideoPlayer.EventType.READY_TO_PLAY, ...)

    Likewise, it is also posible to register the meta-loaded, clicked, events, and the parameters of the callback function for these events are consistent with the ready-to-play parameters.

    Please refer to the documentation for details on VideoPlayer events.

    You can display a UI upon a video in two steps:

    1. Make sure the ENABLE_TRANSPARENT_CANVAS checkbox is checked. It can be found in the Macro Config page in Project Settings

    2. Check the stayOnBottom property on the VideoPlayer in the Properties panel.

    For more information, please refer to the in the test-cases-3d samples bundled with Cocos Creator. Results as shown below:

    videoplayer-stayOnButtom

    Some mobile browsers or WebView do not allow auto-playing of videos and users need to play the video manually in a touch event.