I am very new to Play Canvas, just started yesterday. But I have been coding in Unity for about 5 years and Unreal for about 2 years; and professionally developing for 4 years now. I am trying to use the iFrame tutorials to build a simple scene that displays a youtube video on a plane. I downloaded and imported the css3Renderer.js from the example and tried to use it myself.
I was able to get almost everything working however the video is black. The UI for the video is there and it even starts with the Thumbnail but the moment I press play the video goes black. I feel like I am missing something really small here.
This is the link to my project again I am very new so I might be doing this wrong.
Thank you for any help
February 23, 2021, 10:08pm
Seems to work here:
There may be a browser/platform combination this doesn’t work on. I know iOS has some placement issues that I’ve yet to fix.
That makes sense,
On my android using chrome it worked fine. But on my windows PC using chrome it is black but all the UI is there.
Or is there a simpler solution/workaround?
Looking at it more though, the sample project works for me it is only when I tried to implement it when I found problems.
So I am the problem here, haha, I just don’t know where I went wrong.
February 24, 2021, 2:59pm
Yes, your understanding is correct. The code effectively cuts a ‘hole’ in the canvas to allow DOM objects behind the canvas to show through (the YT video in this case)
Do you have any extensions installed that could block the video?
I’ve just tried this on Windows 10 and Chrome and the video comes through fine in your project.
No extensions that I am aware of. This is my work computer that was purchased recently. I have not downloaded any extensions. Let me just check if anyone else has in the office.
February 24, 2021, 3:03pm
That’s really bizarre
Any errors in the browser console?
playcanvas-stable.dbg.js:60208 script ‘videoTexture’ is not found, awaiting it to be added to registry
was the only warning I have but that is from a script that stopped from preloading and am assuming is there because there is an disabled object with that script attached.
February 24, 2021, 3:09pm
It looks like that warning is because of the script not being preloaded. But as it’s not being used, that shouldn’t be an issue.
February 24, 2021, 3:10pm
Can you try with a different browser please?
Just tried Microsoft Edge and it didn’t work either.
February 24, 2021, 3:15pm
Can you also try reducing the pixel per unit to 300 or something?
And/or try reducing the quality of the video to 480p
Still didn’t work, I changed it to 640, 480, 320, 300, 240, and 125, just to test things out. but nothing worked.
Separately do I have to click parse after making these changes? I did just in case but I wanted to know for sure.
February 24, 2021, 3:22pm
Parse is for when you add or change attributes in the script file.
I can’t think of what it could be without debugging it. It looks like the video stream is failing to render but I would have thought it would give errors in the console
Is there another way to debug it?
February 24, 2021, 3:24pm
Oh did you try lowering the video quality to 480p on the Youtube controls?
February 24, 2021, 3:26pm
I would be digging into the network tab of the browser tools to see if it is getting data from YouTube at all for the video stream as a start
Sorry I guess misunderstood, the 480p but I changed now and still didnt work.
Sorry, I am on the phone with my boss but I am going to start digging through the network tabs and look into this for a bit. Thank you for all your help.
Another thing I might try and is just start from scratch I am only ankle deep.