Hello,
I’m using the native video player in Unity 2018, using a Render texture created at runtime and a raw image.
Everything is fine in the editor and on any standalone build. However, in WebGL the video is rendered black. The audio is audible though. I’ve recently migrated from Unity 5.6 to Unity 2018 - it was fine in the previous version.
Has anyone had the same problem or is there anything new in Unity that has changed the way videos work in webgl?
Thanks in advance
Hi,
Can you playe the video with video player? I cannot do that with a rawImage and Canvas. My code:
public class StreamVideo2 : MonoBehaviour {
public RawImage image;
public VideoClip videoToPlay;
public VideoPlayer videoPlayer;
public AudioSource audioSource;
void Start () {
StartCoroutine(PlayVideo());
}
IEnumerator PlayVideo(){
videoPlayer.clip = videoToPlay;
videoPlayer.Prepare();
WaitForSeconds waitForSeconds = new WaitForSeconds(1);
while (!videoPlayer.isPrepared){
yield return waitForSeconds;
break;
//yield return null;
}
image.texture = videoPlayer.texture;
videoPlayer.Play();
audioSource.Play();
}
}
I have the same problem. A video simple won’t play on a RawImage, not even in the editor. Did you ever find a solution?
Hi,
There is problem for videoplayer with WebGL platform. This is bug and Unity working on this and resolved for versions as issue mentioned in below link,
https://issuetracker.unity3d.com/is…webgl-builds-when-the-video-is-loaded-via-url
I have checked in 2019.3.15f1 (recommended in issue list solution) , 2019.4.2f1 (LTS), 2019.3.0f6. But it’s not working.
Kindly let if you get any work around, me too searching same issue solution.
Thanks,
Virat
I resolved my problem. In my case, it was caused by the fact that I called the VideoPlayer’s API before the game object I placed it on was activated. This seemed to work (because I could listen to the audio), but the video was not visible. As soon as I placed the video player to another game object to activate it right away, everything worked as expected. It is rather counter-intuitive that it kinda worked (i.e. was playing audio but not video). This made me think that there was another problem with my setup.
This was about playing the video whereas target render texture and video itself were not prepared.
Assign targetTexture to an instance of a Render texture (also, be careful here with dimensions and depth), then call, video.Prepare. Make sure you bind prepareCompleted events to the object and play the video just then.
The video rendering in WebGL build issue resolved at my end. This work in Unity 2019.4 LTS versions.
Note:- I have observed that mp4 video file rendered in WebGL build (not wmv). If any have other types of file format status please update here.
Hi
I have a similar issue with the render texture remaining black but the sound playing. I got some Image targets attached with a prefab of a video player. When the image target is tracked the video needs to be played.
public class VideoPrefabBehaviour : MonoBehaviour
{
private VideoPlayer videoPlayer;
private VideoClip videoClip;
DefaultObserverEventHandler parentEventObserver;
private void Awake()
{
videoPlayer = GetComponentInChildren<VideoPlayer>();
if (!videoPlayer)
Debug.LogError("NO video player component found");
videoClip = videoPlayer.clip;
parentEventObserver = transform.parent.GetComponent<DefaultObserverEventHandler>();
parentEventObserver.OnTargetFound.AddListener(OnTargetFound);
}
private void OnTargetFound()
{
videoPlayer.targetTexture.Release();
videoPlayer.clip = videoClip;
videoPlayer.Prepare();
videoPlayer.prepareCompleted += onPreperationComplete;
//StartCoroutine(WaitPreperationToComplete());
}
void onPreperationComplete(VideoPlayer vPlayer)
{
videoPlayer.Play();
}
}
It seems this issue was fixed in Unity 2019.4 LTS. You should probably open your own thread with your target OS, Editor version, and so on. Does it happen in your build or only in the Editor? Are you sure OnTargetFound is called?
You are right, it actually renders in the build but it doesn’t achieve what I want it to do. I will ask in a different thread.
Another solution, on the same Game object you should move the Raw Image up higher than the video player. Like this when the game object activated then the raw image first will be loaded then the video player will start the video properly.
I had an issue where the ‘RawImage’ worked fine in the editor, but when building for Android, it showed up black while the video played with audio.
As a context, I’m making a VR app, using the Oculus Integration SDK and needed to play a series of videos. I followed the steps exactly as shown in the video and to solve my problem, I assigned and created the ‘RenderTexture’ through code and assigned it to the ‘RawImage’. Here’s the code:
[SerializeField] private VideoPlayer videoPlayerObject;
[SerializeField] private RawImage rawImageObject;
[SerializeField] private VideoClip videoClip;
private void Play()
{
videoPlayerObject.clip = videoClip;
RenderTexture renderTexture = new RenderTexture(
(int)videoPlayerObject.clip.width, (int)videoPlayerObject.clip.height, 0);
videoPlayerObject.targetTexture = renderTexture;
rawImageObject.texture = renderTexture;
videoPlayerObject.Play();
}
Do you mean you saw a black frame and then the video? Generally, RenderTexture starts filled with black colour. You can do this to clear the texture.
private void ClearRenderTexture()
{
RenderTexture rt = RenderTexture.active;
RenderTexture.active = videoPlayerObject.targetTexture;
GL.Clear(true, true, Color.clear);
RenderTexture.active = rt;
}
I tried a lot of method to handle this problem.
And finally I got fix it, here is the way:
Unity version : 2022.3.14f1
Component: VideoPlayer
It’s none business of the RenderTexture, no matter how you set the parameters of the RenderTexture, it will not appear any difference, no matter you create it in editor or by code.
You’d better set VideoPlayer on inspector:
Source → URL;
URL → ; (nothing, AKA empty)
Play On Awake → false;
Wait For First Frame → false
Use code to set videoPlayer.url,;
call videoPlayer.prepare();
set callback function of the complete of prepare
and in the callback function, videoPlayer.play()
The most important thing is the video encode format, what I run into is mp4v, I convert it to ogv, not care of its encode format, and it not work. Then, I tried some other encode format, failed again. Finally I got the answer, the video encode format should be AVC1, it’s almost similar of H264, and you can convert by ffmpeg, the command line what I use is:
ffmpeg -i MainBg.mp4 -vcodec libx264 MainBgAVC1.mp4
<html lang="en-us">
<video src="./StreamingAssets/MainBgAVC1.mp4" controls="controls"></video>
</html>
wrap your video file with the html code above, save it as a file, and run it in web browser, if you can see the video is playing, the picture is vivid, the sound is clear, congratulations~! The video is fine in web.
If you just drag the video file into the web browser, no matter which kind you’re using, to check the video status, it’s a wrong way to run in web browser, you’ll got the wrong result.
I didn’t dig into deep enough, but it should fix most video play problems in WebGL platform.
The reason I think that it’s because the video is decoded by web standard mechanism, though it support by the web browser.