Video Continues to Play

Hi there,

I’ve got an issue whereby if the viewer presses ‘play’ then hits the close button, the video audio continues to play.

https://playcanvas.com/editor/scene/1151701

I’ve also added glow ‘halos’ to the spotlights but these don’t seem to be visible in the launch player.

Cheers,
Kim

Hi @khmcneil,

When I press play to start the video and then I press it again the video and audio correctly stop:

Maybe you just miss to fire the same even when the close button is pressed, then the video and the audio will stop.

Hi @Leonidas,

Thanks, initially, I tried adding an entity attribute to select the close button to the videoTextureBtn script (added to the Root). However, it still didn’t pause the button before going into the main scene. I then tried adding the fireEventOnPress script to the button itself, but again this didn’t work.

I’ve gone back to adding the entity attribute to the Root video script, however now I can’t even get the extra attribute to appear in the Editor. It’s late, so I’ll try again tomorrow morning.

In the meantime, if you have any advice or if you can explain ‘miss to fire’ I’m all ears.

Thanks!

Here is one way to approach this:

  1. Add the fireEventOnPress script to your close button, with a new event handler:

image

  1. Add the event handler in your videotextureBtn.js script:
VideotextureBtn.prototype.postInitialize = function() {       
    // Add pause/play controls event listeners
    this.app.on('video:play-pause-toggle', function () {
        if (this.videoDom.paused) {
            this.videoDom.play();
            this.app.fire('video:playing');
        } else {
            this.videoDom.pause();
            this.app.fire('video:paused');
        }
    }, this);
    
    this.app.on('video:pause-toggle', function () {
        if (!this.videoDom.paused) {
            this.videoDom.pause();
            this.app.fire('video:paused');
        }
    }, this);       
};

Hi @Leonidas,

I tried something similar last night. Just tried your solution, but neither have worked.

Do you think it’s because it’s going to the next scene before the video:pause-toggle is able to run?

It may be the issue, since if you disable the scene changing scene it works as expected and the video/audio stops.

Maybe change a bit your code to change the scene after the button handler has fired and the video stops.

Ok, I have no idea how to do that, but I’ll give it a go.

@yaustar - any chance you can also help with this last query? I’m so close to finishing this. :crossed_fingers:

I’m snowed under at the moment. If you can provide clear reproducible steps to this issue, I will try to have a few minutes to look at this

Hi @khmcneil,

Could you give me steps to reproduce where to watch the video and the button that switches scene?

Hi @eproasim,

This is the scene: https://playcanvas.com/editor/scene/1155376

The ‘X’ switches scene back to main (using btnnewScene.js). However, the script that runs that does so before the script tells the video to stop (fireEventOnPress.js which links to VideotextureBtn.js). So I need to change the scene after the button handler has fired (possibly using some kind of defer or wait time?).

I’ve looked at Scene settings and put btnnewScene.js to last in the Script Loading Order. This hasn’t worked.

Thanks in advance for any help with this.

You have two scripts on the entity.

One that fires and event on button ‘click’ event
One that loads the scene on the element press down event

A click event is triggered when the user presses and releases the mouse button. What is happening is the user presses down, the app changes scenes and therefore the click event is never fired because the button is destroyed before the user releases the mouse button to trigger the click event.

The easiest thing to do here is to to change screens on the button click event instead of mouse down and on the entity, ensure the script order is to stop the video first, then load the scene which what Leonidas previously mentioned.

Fixed version: https://playcanvas.com/editor/scene/1158046
Code: https://playcanvas.com/editor/code/797416?tabs=48098274

@yaustar - Thank you SO much! Will publish now.