Skip to content

XR Video Player

XR headsets offer a variety of ways to display videos compared to traditional monitors. With their multi-axis positional tracking and dual-screen rendering capabilities, XR devices can fulfill the need for browsing panoramic videos or dynamic materials in a 3D environment. Cocos CreatorXR v1.1.0 provides a versatile XR Video Player that optimizes video rendering pipelines for XR devices and supports switching display windows, as well as various styles of videos such as 180-degree and 360-degree. Additionally, the player offers interactive features to assist with playback control. By simply adding or replacing video resources, you can easily develop video playback functionality, simplifying the creative process and lowering the barrier to entry.

To create a video player, right-click in the Hierarchy and select Create -> XR -> XR Video Player.

xr_video_player_node

The core components contained within the node are as follows:

XR Video Player

cc.XRVideoPlayer

Used to adjust various properties of the video.

PropertyDescription
Source TypeThe source of the video: REMOTE for remote video URL, LOCAL for local video file path.
Remote URLAppears when Source Type is REMOTE, for the URL of the remote video.
ClipAppears when Source Type is LOCAL, for the local video clip.
Play On AwakeDetermines whether the video automatically starts playing after loading.
Playback RateThe playback speed of the video, ranging from [0.0, 2.5].
VolumeThe volume of the video, ranging from [0.0, 1.0].
MuteWhether the video is muted. When muted, the volume is set to 0; when unmuted, it restores the original volume.
LoopWhether the video should replay when it reaches the end.
Keep Aspect RatioWhether to maintain the original aspect ratio of the video (useful for viewing portrait videos).
ShapeThe style of the video.
ContentAssociates a VideoContent with a MeshRenderer component to render the video texture.
Video Player EventA callback function triggered under specific conditions during video playback, such as during play, pause, stop, or completion.

XR Video Controller

cc.XRVideoController

Used to associate UI elements with video functionality.

PropertyDescription
PlayerThe associated VideoPlayer used to control its playback functionality.
HMD ControlThe controller object node bound to the HMD (head-mounted display).
Left Hand ControllerThe controller object node bound to the left hand controller.
Right Hand ControllerThe controller object node bound to the right hand controller.
Play PauseUI element for play/pause control.
Progress BarUI element for the progress bar.
Fast ForwardUI element for the fast forward button.
RewindUI element for the rewind button.
Video Shape UIUI element for video style selection.
Player Back Rate BarUI element for the playback speed.
Volume UIUI element for volume adjustment.

Video Caption

cc.XRVideoCaption

Used to parse subtitle files. Currently, only .srt subtitle files are supported.

PropertyDescription
Caption Source TypeThe source of the captions: REMOTE for a file specified by a URL to parse the captions, LOCAL for a local subtitle file.
Remote URLAppears when Caption Source Type is REMOTE, for the URL of the remote subtitle file.
Caption FileAppears when Caption Source Type is LOCAL, for the local subtitle file.
Video PlayerAssociates a specified VideoPlayer to synchronize the subtitles with the video based on time.

Note: Vulkan does not currently support the video player functionality.