Video Player Start Play

Hi :wave: :slightly_smiling_face:

I often use a Playable Director in my scenes which begins playing the requisite content when a user interaction takes place triggering the following script (which I attach to the main camera):-

    Behaviour,
    PlayableDirector,
    serializable,
    WebXR,
  } from "@needle-tools/engine";
  import { WebXREvent } from "@needle-tools/engine";
  
  export class Play extends Behaviour {
    @serializable(PlayableDirector)
    timeline?: PlayableDirector;
  
    awake() {
      window.addEventListener("pointerdown", () => {
        if (this.timeline) {
          this.timeline.playOnAwake = true;
          this.timeline.play();
        }
      });
    }
  
    start() {
      WebXR.addEventListener(WebXREvent.XRStarted, () => this.timeline?.play());
    }
  }```

This has always worked fine with the animated stuff, but I could really use some help and advice regarding video content.

I've got a 'combined video' (based on the brilliant 'merged/alpha' Needle sample) in my scene and I'd like it to only start playing when the user interaction takes place.

I've unchecked the video's 'play on awake' component setting (see screenshot) but that only results in the vid displaying as a blank white rectangle when the user interaction tiggers the Playable Director, because obviously I haven't added anything to the script to tell the video to play.

Could some kind (and clever šŸ˜ ) soul tell me what I'd need to add to the script to get the vid to start?

Thanks in advance for your time and expertise šŸ„°
![01.jpg](https://cdn.discordapp.com/attachments/1176938022562963536/1176938022915293267/01.jpg?ex=65d63373&is=65c3be73&hm=d1e8bfb169800df84845038f3641db6bb38c9d8b8a582336037fbb39c8e3b068&)

[Original Post on Discord](https://discord.com/channels/717429793926283276/1176938022562963536)

*by user 908977119781060648*

@frannie :beer: Hi, i think render mode should be set to Renderer or material instead of Api Only

Ooooooo cheers @marcel :cactus:, Iā€™ll give that a go :+1:

by user 908977119781060648

Hmmmmm, nope sadly that doesnā€™t address what Iā€™m trying to achieve. Iā€™ve tried that, plus a few variations, and I still canā€™t get it doing what I want.

I probably didnā€™t ask the right question in the right way.

Basically, if I have the vid set to ā€˜play on awakeā€™ it displays and runs perfectly. However, very deliberately all the other content thatā€™s on the PlayableDirector timeline (and which is triggered by the script above) only begins playing when the user interaction takes place. By which time, the vid is badly out of sync with the other content as itā€™s already been playing.

What I think I need, is something added to the script to tell the vid to only start playing when the ā€˜pointerdownā€™ user interaction takes place.

Maybe? Perhaps??? Really not sure if Iā€™m on the right track???

by user 908977119781060648

There might have been a regression - can you update to the latest version?

One change recently caused audio autoplay to stop working if the audio became active before any user interaction had happened. This might have also affected videos - it should be fixed with 3.25.3

If you could try with that version thatā€™d be great

Iā€™ve been using 3.25.2ā€¦ just now updating to 3.25.3ā€¦ will feedback in a minā€¦ :+1:

by user 908977119781060648

Nope, unfortunately that hasnā€™t made any difference. The vid displays and runs fine, but I still need it to start playing from the very beginning of the video when the user interaction occurs.

by user 908977119781060648

Another option to try. Disable PlayOnAwake everywhere and do it like so:

import {
    AudioSource,
    Behaviour,
    PlayableDirector,
    serializable,
    WebXR,
  } from "@needle-tools/engine";
  import { WebXREvent } from "@needle-tools/engine";
  
  export class Play extends Behaviour {
    @serializable(PlayableDirector)
    timeline?: PlayableDirector;
    @serializable(VideoPlayer)
    video?:VideoPlayer;
  
    awake() {
      AudioSource.registerWaitForAllowAudio(() => {
        if (this.timeline) {
          this.timeline.playOnAwake = true;
          this.timeline.play();
        }
        this.video?.play();
      });
    }
  
    start() {
      WebXR.addEventListener(WebXREvent.XRStarted, () => this.timeline?.play());
    }
  }

Ooooooo! Will try that!!!

Two ticsā€¦

by user 908977119781060648

Nope. Big thanks for the script, Marcel, but still no joy.

I now getā€¦

by user 908977119781060648

You need to add it to your imports
import { VideoPlayer } from "@needle-tools/engine";

Okay, Iā€™ll try to do that :slightly_smiling_face:

by user 908977119781060648

Nope, still not there. The script now runs fine but if the video has the ā€˜Play on Awakeā€™ setting disabled it just displays as a white rectangle again.

As saidā€¦ the vid renders absolutely perfectly (with the alpha/transparency looking fabulous :sunglasses: ) when itā€™s set to ā€˜Play on Awakeā€™. Sadly, though, I really do need the video to go right back and start from its beginning when the user interaction occurs, otherwise itā€™s wildly out of sync with the rest of the scene content thatā€™s triggered to play by that same interaction.

Big, big thanks for all the suggestions thus far, though. Theyā€™re greatly appreciated, I kid you not!

Iā€™ll put my thinking hat on and see if I can maybe find a different way to achieve things :slightly_smiling_face:

by user 908977119781060648

Hey Frannie :wave:
It should work :confused: For example, if you add a button and add a onClick action like so:
image.png

It should start playing the video.

If you see a white square like this one:

This means the video didnā€™t start :thinking: So, perhaps thereā€™s an error in the console?

Also, make sure that youā€™ve assigned the VideoPlayer in the inspector.