- Home /
WebGL - Video
So I gather that currently WebGL builds does not offer support for the class "movietexture". Is there any way that I can play videos in HTML5/WebGL (using Unity of course or else I would not post this question here)?
As of now, I can only think of applying a video texture on a plane to play videos. And I came across Jonas Echterhoff's proof-of-concept html5 video playback code which he posted in some forum but I was unable to find his forum. He mentioned it here.
Any ideas anyone?
I tested the WEBGL Video Asset found in the Assetstore and it works fine on $$anonymous$$esh Renderer but i wasnt able to make it work on the CanvasRenderer in a Raw Image UI Component. Any way to do this? Any help here?
Answer by Bentoon · Jan 12, 2015 at 09:13 PM
Very interesting question. Video on a plane works beautifully in most cases. Try Video Texture Pro (free in asset store. Though I'm sure donations are appreciated)
I have heard whispers that Unity 5.something will have a lot of video support
~be
The thing is... I am doing this in Unity 5.1 Beta Pro version. I believe Unity's movietexture is currently the only way to play videos on surfaces. The following is the breakdown of the usability of that feature. As you will see, not much has changed since Unity 4 with regards to video.
$$anonymous$$ovieTexture is not supported in WebGL.
$$anonymous$$ovieTexture is not supported in iOS. The alternative way to play videos is to use HandHeld.PlayFullScreen (requires iOS Pro) which only plays the video fullscreen. But for anyone who wants to play videos on a surface, well sorry.
$$anonymous$$ovieTexture is not supported in Android. Same story as above. Also Needs Android Pro.
I just hoped things really changed for the better when the final version of Unity 5 is released.
BUT anyways, thank you very much for your suggestion of Video Texture Pro. I think this is way better than another plugin I found (and paid good money for) in the asset store called "Video Player" by $$anonymous$$12. Unfortunately, for this plugin, I later realized I was not able to pause and resume videos. It works quite well on iOS too but not on WebGL, contrary to what they advertised.
Answer by jtothebell · Mar 07, 2015 at 02:06 AM
I was hoping for a solution to this problem as well, and I started writing a wrapper around Jonas' sample that you linked to in your question. Basically there is a wrapper class the uses the normal MovieTexture class if you are in the editor, web player or standalone, but uses Jonas' WebGL movie texture proof of concept when you deploy to WebGL. It was working in my initial tests, but I've since gotten sidetracked on other things and haven't had a chance to really harden it.
Hello, When I tried to use this Wrapper for a WebGL build i was getting the following error
An error occured running the Unity content on this page. See your browser's JavaScript console for more info. The error was: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.
Can u help me with this?
I had that problem but managed to fix it adding this line
video.setAttribute('crossorigin', 'anonymous');
in the WebGL$$anonymous$$ovieTextureCreate function
EDIT: I got the answer from here:
An error occured running the Unity content on this page. See your browser's JavaScript console for more info. The error was: Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The video element contains cross-origin data, and may not be loaded.
The above error i removed by keeping the video in the same server. But now only sound is co$$anonymous$$g from the video, nothing is displaying.
Even, I am also facing the same issue with safari browser.It's working fine in chrome and firefox. But it's giving following error in safari " INVALID_VALUE: texImage2D: no video".
Answer by Sujil-V-S · Mar 31, 2016 at 09:05 AM
Hello. Finally found a solution for this. In WebGLMovieTexture.jslib I updated the following method.
WebGLMovieTextureUpdate: function(video, tex) { if (videoInstances[video].paused) return; if (videoInstances[video].readyState < videoInstances[video].HAVE_CURRENT_DATA) return; GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[tex]); GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, true); GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, videoInstances[video]); GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_WRAP_T, GLctx.CLAMP_TO_EDGE); GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_WRAP_S, GLctx.CLAMP_TO_EDGE); GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_MAG_FILTER, GLctx.LINEAR); GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_MIN_FILTER, GLctx.LINEAR); GLctx.pixelStorei(GLctx.UNPACK_FLIP_Y_WEBGL, false); },
Answer by omrip32 · Jan 10, 2017 at 06:23 PM
I'm also trying to use RawImage component for the rendering and having no luck so far.. I looked at this link (which the poster claimed that he solved the issue http://answers.unity3d.com/questions/1208911/how-to-use-a-rawimage-with-simple-movietextures-fo.html) but that solution didn't work as well.. Any help is greatly appreciated!
Answer by nsmith1024 · Jan 21, 2017 at 11:46 PM
Anybody knows how to get WebGLMovieTexture to stop playing a video and start playing a new video at a new URL?
I cant seem to get it to do that other than creating a new instance of WebGLMovieTexture, and then it now has TWO video streams going the first and the second. even if I use Stop() (it stops the playback) but it still streaming the video data from the internet in the background.
How do I tell it to stop playback and start playing a new video from the new URL?
Your answer
Follow this Question
Related Questions
Screen Recording in WebGL 0 Answers
VideoPlayer not playing in WebGL Build 0 Answers
Youtube videos in Unity WebGL 2020.3 0 Answers
How stocked the video in full screen in the background? 0 Answers
Various documentation about movie formats is confusing... 1 Answer