2D UI tabs to play/pause video texture

Help & Support
1

Can a 2D UI element (one a play video UI and a pause video UI) be used to start playing a video on a video texture plane when click on play video and pause when click on pause video? Work in progress project: https://launch.playcanvas.com/680301?debug=true

Thanks

2

Yes, it can.

2020202020

3

Do you if there is a tutorial or sample script I can look at?
Thanks

4

Looking for a tutorial or a script example that uses 2D UI elements to play/pause a video texture (on an entity).
OR
If Editor has a video control option to play/pause a video texture that allows a user to conrol.
Thanks

5

Please don’t post multiple threads on the same issue. Merged to your previous thread.

6

Remember that the video is a DOM object on the page so the web API for starting, stopping, pausing video works here too. There’s a few code samples and tutorials on UI buttons that can be used here. You just have to use the video APIs on the button click event callbacks…

7

Maybe this will help:

PlayCanvas video Texture Tutorial

8

I added custom video controls to a 2D UI element (using html, ccs, js) but the video won’t play. Also, the buttons don’t work, not sure if it’s because the video isn’t playing. The html works fine when I open it on a browser. project: https://playcanvas.com/editor/scene/680301
All items need are in Video proj folder.

  1. Anyone know why the video won’t play?
  2. And why a url (video) won’t play as a texture from YouTube or from our server?

Thanks

9

Here’s a simple example project of pausing/playing the video via the PlayCanvas UI system: https://playcanvas.com/editor/scene/693479

If you are talking about the video DOM in the HTML file, it’s because the URL is invalid (see the developer console in the browser for more details). It looks like you are trying to use the video that you have uploaded in the project, if that is the case, you need to get the URL from the asset and add that URL to the HTML when you add it to the page.

ie. Use a placeholder identifier text in the HTML file and replace it at runtime via a find and replace.

There can be many reasons for this which include:

  • You have to use a direct URL to the video file. A YouTube link won’t work as it’s not linking directly to the video file. It’s possible to resolve the video URL from the YouTube page and you are best looking at source from something like youtube-dl.
  • The video file is not in a format or codec that the browser can use.
  • The video is being hosted on an insecure server (http) when the request is from a secure server (https)
  • CORs issue where the server that the video is hosted on doesn’t allow a request a different domain
10

Thanks for the info. Really appreciate it.

11

Can you tell me how I can get the url for the video asset in my project so I can add it the the html and what it would be?

Thanks