Does anyone know if it’s possible to upload and play a video directly from the Playcanvas editor? I tried following the video textures tutorial but it seems to require a video to be hosted on an external site, which I don’t have. I tried uploading a .mp4 file to Playcanvas, but it imported as an audio asset, and I don’t know how to play the visual part.
No worries, I figured out the issue. The mp4 video I uploaded was corrupt. The real issue is that I can’t load videos as textures on my iPhone so I thought loading local videos instead of cross-domain videos would solve the issue but I was wrong. Although local videos may work on full-screen on iPhone, mapping it onto a texture doesn’t work. I have yet to see a working example of this. If you know of any PlayCanvas developer that can give me an example of a video texture that I could load and see work on my iPhone, please let me know. I can even pay for them to debug my code. Need to fix this issue as soon as possible so that I can continue with the classically animated video production (that will be added as textures within my game).
I’m afraid I don’t have a iOS device to test with. The thing to note that I think both iOS Safari and Android Chrome prevent autoplaying or at the very least prevent audio from video autoplaying without some user interaction (like a tap or a click on the screen).
So I tapped harder before the tv falls. The video loads full screen and one I exit full screen the tv graphics breaks. See attached image. This is sumiliar to what happens in my own game. The entire graphics of the game becomes corrupted
That’s interesting . Looks like iOS Safari does something different with video. Unfortunately, I don’t have an iOS device to test against and check the console logs.
For me on iOS, when I tap the screen, the image on the TV turns from black to the first frame of BBB. Then, a full-screen video player pops up showing a black screen but playing the audio of the video ( a yawn sound ).
If I close the video, I see the correct visual of the 3D models with a static image on the TV from the movie ( I’m not what Anton is seeing, where the orange part of the TV is missing ).
iPhone 6S Plus, Safari or Chrome, using /p/ or /e/p/
My phone is 5s, so maybe that makes things worse than your 6s. But according to Safari’s inline attribute being accommodated with these devices, theoretically it should be fine in both devices.
Anton, speaking of differences, can you try out the link on this thread and post your results - there def seems to be strange things going on with PlayCanvas and iOS!
Did any one find the solution to this? My video texture is coming from a different origin, and I have CORS enabled on the CDN with the Access-Control-Allow-Origin header set as wildcard, and the videos and images I’m pulling work fine on Chrome and Firefox, but Safari still pushes this error:
playcanvas-stable.min.js: The operation is insecure.
The problem was just Apple being Apple. Safari is not a big fan of CORS requests that return a redirect response. As far as the browser is concerned, the redirect’s headers don’t mean anything. I solved by changing the way I fetched my videos to ensure that the src of the video element matched the redirect response like so:
i am trying to play video texture in playcanvas, i downloaded the sample video from tutorial and upload to my own project , also copy the video-texture.js and tv-screen.js to my project , but when i run it, somehow i got this error
And i just found i don’t have Audio Setting in my project. did i missing something ?