1. Video Play Beginning
First drag in the video you want to play.
Create Media Player and Media Texture.
Create Material and change the material to User Interface.
In the UI interface, create an Image and load this material.
Add the Media Sound component to the character Pawn interface and drag the small TV into it.
The playback can be completed by implementing the corresponding playback logic on the corresponding UI interface.
2. Functions that Media Player can call
2.1 Set the sound volume
Note that the function of Media Sound needs to be called here , not that of the small TV.
2.2 Set play and close
2.3 Drag the progress bar
Note : If Seek is called too frequently, there will be freezes, and high brushing cannot be achieved.
The time here can be GetTotalXXXconverted into seconds, milliseconds, etc., for the calculation of the progress bar.
2.4 Set playback rate
2.5 Set whether to play in loop
2.6 Set mirror image
Flipping the Image is a mirror image, that is, changing the rendered X to -1.
3. Other self-implemented functions
3.1 Display playing time
Playing time is real-time and updated, implemented in Event Tick.
3.2 The progress bar displays the playback screen
Use another same container as the display screen, and add it to the original video progress bar.
In the original video, when the mouse is hovered Set Time by Event, it is frequently called to achieve the effect of real-time images.
3.3 Show and hide
- Visable : Physical collision and visible
- Collapsed : collapsed, may change the original layout
- Hidden : hidden, will not change the original layout
- Not Hit-Testable : Visible, but no click physics collision
- Note: Some video functions use Collapsed, such as the collision box that needs to be hidden but does not affect the layout. Hidden, the box that affects the layout. Not Hit-Testable, such as the real-time playback screen displayed by the video function, needs to be visible and cannot have physical collisions.
A box is used here to clear all related explicit and hidden operations.
3.4 Picture-in-picture and full screen
Picture-in-picture and full-screen are relatively simple, and both use the same Media Mat to achieve synchronization. You only need to pass in the values that need to be synchronized.
3.5 Video Definition
Because the Render Target can adjust the video definition, but the Media Player cannot. Therefore, we can adjust the video definition by continuously drawing the Media Player to the Render Target.
First create the Render Target.
Use the original material to Draw Material to Render Targetcontinuously draw to the material of the Render Target.
Using the corresponding Render Target material is the corresponding resolution size, and the way to adjust the resolution is to adjust the sampling.
4. Final effect
Finally, a video playback UI imitating station B was realized.
