[SOLVED] Problems with VideoTexture

This is my project PlayCanvas | HTML5 Game Engine
i tried the tutorial code and nothing work
why?

Sorry, what’s not working. I see this (a video texture playing on the ground plane):

What are you expecting to see?

It won’t load on iOS.

But it works fine in Chrome for Windows.

Unfortunately iOS doesn’t support video textures as it can only play videos in fullscreen. However, I think they’ve fixed this in iOS 10.

I just tested it on iOS 10 on iPhone 6. The video does not play.

Is there other way to render videotexture from another html5 player???

The only way to stream a video to a texture with WebGL and WebGL-powered engines like PlayCanvas is to load it via a video element. There is no alternative. This has worked everywhere except iOS for a few years now. My understanding was that iOS 10 would fix this. I’ve tweeted to an Apple engineer about this but he hasn’t responded yet.

this has worked everywhere except iOS for a few years now

I’d really like video on textures to work - and find your note encouraging - but need to ensure that I’m not missing something:
these two demos show only the first frame of the video when running on android 6.0.1…

https://playcanv.as/p/NQ2f87MT/
https://playcanv.as/p/IitiVNN3/

(it also doesn’t play on iOS 9.3.2 but per the tweets w/ Dean Jackson that would have been surprising)

Is it possible that the ‘click to start playback’ thing is what is preventing these demos from showing playback on android?

How do I full-screen play video in IOS?

Hello guys,

My video is playing with a button interaction but popping up to fullscreen in iOS 12. (iPhone XR)
How can we play it in a plane model instead of full screen ?

Any idea ???

I personally have never seen a WebGL based app that can play back a video texture on 3D geometry on a recent version if iOS. I’m not convinced it’s currently possible. Please do let me know if I’m wrong though.

Thanks for the swift reply.

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

Here it is ! It’s working fine on android but in iOS video is getting played but as a fullscreen. We want it to be played on a 3D geometry as texture. If you can help us with that it would be really great.

Thanks

Hi @Pavan_singh, I have updated this tutorial to work correctly in all browsers including iOS:

https://playcanvas.com/project/405850/overview/tutorial-video-textures

Code:

https://playcanvas.com/editor/code/405850?tabs=4468335

1 Like

@will The published link works here on Windows(Edge and FireFox) and iOS(Safari and Chrome), but the video doesnt start on Windows Chrome.

Weird! Works for me. Anything in the JS console?

I had assumed it was something to do with Chromes auto-play issue, but there is an error in the console relating to a bad gateway.

On Chrome…

On FireFox…

On Edge…

( all ran from the same desktop )

That version of the app you’re running isn’t the version I’ve fixed:

OK, now I’m super-confused. If I run it from the project dashboard page, the video plays. If I click the linked app from my post above, it doesn’t play. WTF?

That version of the app you’re running isn’t the version I’ve fixed:

I’m pretty sure it was the same version you fixed.