Trying to preload a video without using the PlayOnAwake

🌵 Needle Engine
1

Hi :), I’m triying to preload a video before use it in order to improve the video’s fluency. So I unchecked the option PlayOnAwake of the VideoPlayer.
Then I added the next code

export class VideoLoadController extends Behavior{

  @serializable(VideoPlayer)
    videoPlayer !: VideoPlayer; 

  private video !: HTMLVideoElement;

  start():void{
    if(this.videoPlayer){
        this.video = this.videoPlayer!.videoElement!; 
            //this.video.preload="auto"
            this.video.load(); 
             
            //this.video.preload="auto";
     
            this.video.addEventListener("canplaythrough",()=>{
                this.video.play();
            });
      }
  }  
}

But the problem is that, if I uncheck the PlayOnAwake, it seems that the videoElement doesn’t exists. So I can’t preload the video. Do you know some alternative in order to preload it ?
I tried also, leave the PlayOnAwake and pause the videoElement and then resume it but It did’t work as I expected.

Thanks :slightly_smiling_face:

Original Post on Discord

by user 632418299711324161

2

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

3

Here is what I found for you :brain: Discord

4

Hello DiegoEloko,

It seems that the VideoPlayer component does indeed hold the reference to the HTMLVideoElement you are trying to manipulate. When playOnAwake is unchecked and you are trying to access the video element, it may not be initialized properly.

Instead of relying on playOnAwake, you should manually initialize the video element using the create method provided by the VideoPlayer component. This method allows you to create the video element without immediately playing it.

Here’s an updated version of your code that initializes the video element and then preloads and plays the video:

export class VideoLoadController extends Behavior {

  @serializable(VideoPlayer)
  videoPlayer!: VideoPlayer; 

  start(): void {
    // Ensure the VideoPlayer is assigned
    if(this.videoPlayer) {
      // Manually create the video element without auto-playing
      this.videoPlayer.create(false);

      // Access the video element
      const video = this.videoPlayer.videoElement; 
      if (video) {
        // Set preload attribute and load the video
        video.preload = "auto";
        video.load();

        // Listen for the 'canplaythrough' event to start playback
        video.addEventListener("canplaythrough", () => {
          video.play();
        });
      }
    }
  }  
}

thread_RYm7bFwoZJJ3KMWbKQX5iJZJ

5

What does the function VideoPlayer.create(false) does ?

by user 632418299711324161

6

Thinking :brain:

7

The bool argument is if it should play after that automatically so create(false) will just create the videoelement but not start playing

8

You can see this kind of information in your ide usually when you hover the method

9

Thanks, it worked :slightly_smiling_face:

by user 632418299711324161

10

The next version will also expose a “preload()” method that you can call

11

That would be really cool

by user 632418299711324161

12

under the hood it does the same as create(false) tho so you can just stick with create(false) :slightly_smiling_face:

13

it’s just more intuitive :slightly_smiling_face: