[SOLVED] Adding a play button on a video

I have a video inside my game, where I dont want it to be auto-played but to add a play button for the user to play/pause it. Can you help please?

Hi @AhmedFarahat,

You can take a look at the following tutorial on how to add buttons with code to execute custom logic on click:

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

For a video you can simply disable auto-playing, and later call a method to play it. All these is JS related, and not Playcanvas API related:

videoElement.autoplay = false;

// --- later on your click handler
videoElement.play();
1 Like

I tried it, getting this error [videotexture.js?id=31549325&branchId=4971e462-7cf5-4fe0-af5e-2d1ec8aa94fd:53]: videoElement is not defined
ReferenceError: videoElement is not defined
at script.Videotexture.update (https://launch.playcanvas.com/api/assets/files/scripts/videotexture.js?id=31549325&branchId=4971e462-7cf5-4fe0-af5e-2d1ec8aa94fd:53:9)
at ScriptComponent._scriptMethod (https://code.playcanvas.com/playcanvas-stable.dbg.js:29896:21)
at ScriptComponent._onUpdate (https://code.playcanvas.com/playcanvas-stable.dbg.js:29932:14)
at ScriptComponentSystem._callComponentMethod (https://code.playcanvas.com/playcanvas-stable.dbg.js:30347:51)
at ScriptComponentSystem._onUpdate (https://code.playcanvas.com/playcanvas-stable.dbg.js:30356:10)
at Function._helper (https://code.playcanvas.com/playcanvas-stable.dbg.js:26805:14)
at Function.update (https://code.playcanvas.com/playcanvas-stable.dbg.js:26813:10)
at Application.update (https://code.playcanvas.com/playcanvas-stable.dbg.js:26226:24)
at https://code.playcanvas.com/playcanvas-stable.dbg.js:26601:11

Hi @AhmedFarahat,

That code I’ve posted can’t work as it is. You will need to update it to match your project e.g. reference the HTML Video element that you would like to stop/play manually.

Solved, Done

1 Like