Search Unity

  1. Unity 2020.1 has been released.
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Video New Unity video player in WebGL.

Discussion in 'Audio & Video' started by caiobrighenti, Jun 29, 2017.

  1. caiobrighenti

    caiobrighenti

    Joined:
    Jun 26, 2017
    Posts:
    1
    Has anyone gotten the new Video Player working in WebGL? I've tried basically everything under the sun, as well as looking through this forum. It would appear this functionality is bugged to the point of it not working, but I doubt Unity would put out this feature with it being entirely broken. What am I missing? Anyone got a solution?
     
    byrontik likes this.
  2. mikezenox

    mikezenox

    Joined:
    Oct 18, 2012
    Posts:
    55
    Bump for support.
    I am able to stream the video files from my web server even, but when I upload and test the WebGL build, the VideoPlayer component reverts the back to the sprite renderer that it originally overrides.
     
  3. RavenLiquid

    RavenLiquid

    Joined:
    May 5, 2015
    Posts:
    43
    Cant get it to work.

    I tried to play an MP4 file.
    Works fine in android and standalone build.

    WebGL:
    - Cannot play media. No decoders for requested formats: video/x-ms-wmv
    When I transcode to H264
    - Cannot play media. No decoders for requested formats: video/x-ms-wmv
    When I transcode to VP8
    - Nothing happens. Video does not play and there are no errors whatsoever. When I do prepare, the completed event is never triggerd.
     
  4. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    447
    It definitely works. We had it working on our end but switched for different reasons to timelines. I _did_ have to go through Unity support at one point because they had a bug ... but its definitely been fixed in the official 2017 release. I would poke unity somewhere until you understand what the issue is.

    TLDR;
    Its been working for us in 2017.1 WebGL.
     
  5. Optera

    Optera

    Joined:
    Mar 23, 2015
    Posts:
    3
    Hey @DGordon ,

    We're having the same issues as @RavenLiquid. It's great to hear that you got it working - we're not sure what we're missing. Do you by any chance have a small project that is working, and if so, do you mind sharing it with us?

    Regarding your video files, did you do anything specific on the codec / encoding that we're missing? We tried converting our raw video to the mp4 container using both VLC and Premiere and then importing into Unity, and neither one worked. We also played around with all the video import settings in Unity, and none of that worked. I'm wondering if your workflow was different somehow.

    Thanks much!
     
  6. adam_sgil

    adam_sgil

    Joined:
    Jan 23, 2013
    Posts:
    5
    I have it working using file streaming from streaming assets but I had to build the url string using
    Code (CSharp):
    1. if (string.IsNullOrEmpty(url))
    2.         {
    3.             url = System.IO.Path.Combine(Application.streamingAssetsPath, filename);
    4.         }
    5.  
    6.         videoPlayer.url = url;
    7.         videoPlayer.SetTargetAudioSource(0, audioSource);
    8.  
     
    carlos777 likes this.
  7. Optera

    Optera

    Joined:
    Mar 23, 2015
    Posts:
    3
    Thanks Adam! It looks like your solution is about the best you can get - after more research, apparently the WebGL builds don't support embedded video, only loading from a URL:

    https://forum.unity.com/threads/unity-5-6-0b4-issues-with-video-player-in-webgl.452092/

    To the Unity folks: you should probably make this glaringly obvious in the docs. This is different from how videos were done previously and different from just about every other type of asset.
     
    Jelmer123 and salgado18 like this.
  8. DGordon

    DGordon

    Joined:
    Dec 8, 2013
    Posts:
    447
    Sorry I never responded ... I was busy dealing with other WebGL and VideoPlayer bugs. Heh.

    Please note: WebGL has a lot of undocumented issues (although we are using it and the final outcome is it works for us), and the VideoPlayer does as well. I suspect the Unity devs are still working their way through various issues. I only got the VideoPlayer working after asking on the forums and having a couple of issues fixed in the 2017 beta (which is as expected). Both of these technologies still have blatant issues that are hopefully being worked on. I'm not complaining that they have issues (I'm glad we have them), but don't expect everything to always work yet.

    For now, you should assume the documentation could be incomplete or blatantly wrong (literally, I came across deprecated code in the 2017.1/2017.2 documentation that crashed WebGL).

    It's getting there ... but its really a bit of a minefield right now due to the lack of documentation and official responses (ie: this thread).
     
    Last edited: Oct 11, 2017
    unitybru likes this.
  9. byrontik

    byrontik

    Joined:
    Dec 29, 2013
    Posts:
    5
    I tested this and it works - https://forum.unity.com/threads/videoplayer-webgl-url-not-working.467391/
    Place an htaccess file with the code as described in the link above next to the video on the server
     
    ulissescad likes this.
  10. ulissescad

    ulissescad

    Joined:
    Oct 31, 2015
    Posts:
    13
    Hi, I have the same issue, can you explain to me how solve this? (I don't have experience with html or servers, just games running in windows and android). I put the file video in streaming assets, use the URL but not works anyway. Any answer helps. Thx. Below a little of my code:


    if ( System.IO.File.Exists (Application.streamingAssetsPath + "/GAMES_TODOS.mp4")) {

    videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"GAMES_TODOS.mp4");
    videoPlayer.Prepare ();
    videoPlayer.Play ();

    Debug.Log ("FileExists");
    }
    else{
    Debug.Log ("FileDontExists");
    }

    EDIT: Works on Editor but when I build a WebGL all components run, less video. Don't have any error message or something like that.
     
    Last edited: Apr 12, 2018
  11. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"/GAMES_TODOS.mp4");

    Slash before video clip name??
     
    ulissescad likes this.
  12. ulissescad

    ulissescad

    Joined:
    Oct 31, 2015
    Posts:
    13
    First sorry for my english. I go post my solution:

    In editor create a folder with the name StreamingAssets and put your video file into then (the video format I uses is .mp4);

    script:
    Create a VideoPlayer component and assign in a plan case needs video in scene or camera if you need video full screen;
    Use this command to combine the streaming assets path with the video file name and extension:
    videoPlayer.url = System.IO.Path.Combine (Application.streamingAssetsPath,"myFile.mp4");

    and, call play mode:
    videoPlayer.Play();

    works fine to me with mp4 and MOV videos! Unity 5.6.5

    Thanks for all answers! Helps a lot!
     
    walkmn likes this.
  13. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    Playing a video directly from StreamingAssets work well for me but I'm trying to download to some kind of web cache system. So, I'm trying to copy a video file to idbfs (IndexedDB) an play it from there without any luck:

    Code (CSharp):
    1.  
    2. IEnumerator RetrieveStreamingAsset(string mediaFileName)
    3.     {
    4.         string streamingMediaPath = Application.streamingAssetsPath + "/" + mediaFileName;
    5.         string persistentPath = Application.persistentDataPath + "/" + mediaFileName;
    6.         if (!File.Exists(persistentPath))
    7.         {
    8.             WWW wwwReader = new WWW(streamingMediaPath);
    9.             yield return wwwReader;
    10.  
    11.             if (wwwReader.error != null)
    12.             {
    13.                 Debug.LogError("wwwReader error: " + wwwReader.error);
    14.             }
    15.  
    16.             System.IO.File.WriteAllBytes(persistentPath, wwwReader.bytes);
    17.         }
    18.  
    19.         video.url = persistentPath;
    20.     }
    21.  
    So, the video.url ends pointing to that new location (idbfs/xxxxxxxx/myvideoclip.mp4). But any time I call to video.prepare() I get an 404 not found.

    Any idea?
     
    TKaminaga likes this.
  14. ulissescad

    ulissescad

    Joined:
    Oct 31, 2015
    Posts:
    13
    hi, try this way maybe works. I use a public method, no return:

    atention with file extension on name;
    1. public void PlayVideo()
    2. {
    3. string streamingMediaPath = System.IO.Path.Combine (Application.streamingAssetsPath,"myFile.mp4");
    video.url = streamingMediaPath;
    video.Prepare();
    video.Play();
    1. }
     
  15. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    Last edited: Apr 19, 2018
    ulissescad likes this.
  16. ulissescad

    ulissescad

    Joined:
    Oct 31, 2015
    Posts:
    13
    Hi,

    In my case the video inside the project was the goal and even this is little hard to make if you never use the streamingassets folder or not have experience with WebGL, servers etc (my case). You try use other url video sample? Maybe the problem is a server permission. (I read this in other post)

    Thanks.
     
  17. gabriel8506

    gabriel8506

    Joined:
    Oct 27, 2017
    Posts:
    8
    Hello, im having issues with Unity 2018.1.0f2 and the VideoPlayer on WebGL, the first video usually plays fine, when i change videos, i can only hear the audio playing but black screen.

    void ShowCurrent()
    {
    Player.url = m_Videos[CurrentPictureIndex];
    Player.Prepare();
    Player.Play();
    }
     
  18. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    Maybe you need to call Stop() in the previous videoplayer before Prepare() the next one.
    I mean, It seems you are using the same VidepPlayer to play several videos. Make sure you Stop() each video before Prepare() the next one.

    It's the only thing I can think of. Another posibility is to test it in 2017.4.3.
     
    Last edited: May 17, 2018
  19. gabriel8506

    gabriel8506

    Joined:
    Oct 27, 2017
    Posts:
    8
    Well, that didn't fixed it, but gave me a good idea, thank you. Is working fine now.

    public void OnDisable()
    {
    if (Player)
    {
    Player.Stop();
    Player.targetTexture.Release();
    Destroy(Player.gameObject);
    }
    }

    private void CreatePlayer()
    {
    if (Player)
    {
    Player.Stop();
    Player.targetTexture.Release();
    Destroy(Player.gameObject);
    }


    Player = new GameObject().AddComponent<VideoPlayer>();
    Player.audioOutputMode = VideoAudioOutputMode.AudioSource;
    Player.SetTargetAudioSource(0, audioSource);
    Player.renderMode = VideoRenderMode.RenderTexture;
    Player.targetTexture = m_texture;
    }

    void ShowCurrent()
    {
    CreatePlayer();

    Player.url = m_Videos[CurrentPictureIndex];
    Player.Prepare();
    Player.Play();
    }
     
  20. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    So, you're creating a new VideoPlayer each time you play a video, isn't you? Clever! That way you don't fix the problem but anyway you find a way to make it work.
     
  21. FiveFingers

    FiveFingers

    Joined:
    Oct 15, 2009
    Posts:
    540
    I tried to imported .mp4 playing together with 1 on them with 0.5 alpha.
    Was great on the editor, but the webGL build was a blue empty window.
    I am trying more stuff today, I can't believe we have to use more videoplayers GOs to have the job done.
    Will put up some tests and let you know if I could make it.
    BTW, In your question you didn't specify if you want to play local video or stream an url ?
     
  22. jocyf

    jocyf

    Joined:
    Jan 30, 2007
    Posts:
    258
    Hi, sry I didn't realize your post!

    My idea is to download the video from an url, but instead of playing it using videoplayer.url , I want to be able to store that downlodad video in the browser's internal cache (idbfs / indexedDB), so I an play it several times if I want to without downloading it everysinle time.

    I mean, If I have several little videos I want to play in an random order, the way to go is to be able to download all the videos once, store them somewhere (browser's internal cache memory) and play them as you want. Right now, it seems it's imposible to do it that way.
     
  23. ldeplaen

    ldeplaen

    Joined:
    Nov 8, 2016
    Posts:
    4
    Hi, it's possible to play video with this way.

    Check my response : https://forum.unity.com/threads/videoplayer-webgl-from-streamingassets-to-indexeddb.527527/
     
  24. BLT_Dev

    BLT_Dev

    Joined:
    Apr 14, 2018
    Posts:
    4
    I understand NatCorder will work in WebGL. However, I cannot seem to be able to get the path of the video for playback. I deploy the WebGL project to an Azure server, and it runs fine. After recording I get a message in the console saying NatCorder completed recording the video to URL, and some weird blob path. It also says the size is 0. Anyone ever work with WebGL and NatCorder and have any insight?
     
  25. Coopervr

    Coopervr

    Joined:
    Mar 24, 2020
    Posts:
    5
    I know this is old. But, I still had the same issue so someone else might find this solution:

    I used AWS to host it, followed their tutorial on activating AWS as CORS configuration and hosting a video. But, now I'm streaming from URL via webgl upload to itch.io.

    I hope this helps someone else. So much relief. Took 5 minutes to implement the solution!
     
  26. Coopervr

    Coopervr

    Joined:
    Mar 24, 2020
    Posts:
    5

    See above - I actually found a solution
     
  27. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    985
    Cross-posting in all these old threads, claiming you "fixed it" - when all you've done is learnt how to configure a webserver (Which most people's servers already are) - probably isn't a big help. There's a bunch of these bugs in WebGL right now, and your "solution" does nothing to fix them, I'm afraid.
     
    SenseEater likes this.
  28. SenseEater

    SenseEater

    Joined:
    Nov 28, 2014
    Posts:
    66
    You are not helping. Stop posting indirect unrelated workarounds for an issue on all these related threads.
     
  29. ismaelnascimentoash

    ismaelnascimentoash

    Joined:
    Apr 2, 2017
    Posts:
    26
    SenseEater likes this.
  30. TantrumLab

    TantrumLab

    Joined:
    Aug 2, 2017
    Posts:
    3
    Hello everyone, Tony here from TantrumLabs. We have been experiencing problems with WebGL builds playing videos and I believe I have a solution: stop using Unity's native VideoPlayer. Until they can get this fixed, you'll go insane trying to get it to work on all platforms. My advice is to use a 3rd party video player that you will have to learn. I found a great one called AVProVideo(http://renderheads.com/products/avpro-video/) and they have a free trial version.

    They have some documentation and while it is not to a Unity standard, it will help you find what you are looking for. Don't give up on third party plugins. They may not be easy, but they can work. I will be uploading a project soon that will show this off but in the meantime, give the free trial version of AVProVideo a try and start uploading those video players.
     
    ismaelnascimentoash likes this.
  31. SenseEater

    SenseEater

    Joined:
    Nov 28, 2014
    Posts:
    66
    Reads like an absolute piece of PR for avpro
     
    TantrumLab and a436t4ataf like this.
  32. TantrumLab

    TantrumLab

    Joined:
    Aug 2, 2017
    Posts:
    3
    Is it perfect? no, theres a learning curve to it, but at least it has documentation which is more than I can say about other plugins. The price point is steep at $150, but good for companies and those who's project is based on web video playing. If you find another plugin that has understandable documentation with a simple inspector UI, post it here so we can all benefit. But Yeah Rereading it does sound very ad like
     
  33. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    985
    The price point isn't $150 (I double checked: that's still the price for just ONE plugin for ONE platform - if you want to use this across your apps it's going to cost you a lot more). Reading something so obviously misleading makes me suspicious this is a shill post - I'm sorry if you're genuine, but you are using the words that a marketing department would use, and you're not using the words that a developer would use.
     
    TantrumLab likes this.
  34. TantrumLab

    TantrumLab

    Joined:
    Aug 2, 2017
    Posts:
    3
    Fair point. No one is right all the time and I'm just helping where I can. Trust me researching for this was brutal and if it helps people not tear their hair out, I can walk away happy. It was not a permanent solution, but something where people can start out from.
     
    ilmario and a436t4ataf like this.
  35. thieum

    thieum

    Joined:
    Apr 8, 2011
    Posts:
    54
    Consider that it might not be the videoPlayer that is not working but the graphic pipeline that can't handle the raw videosource (loaded through url and stored in the StreamingAssets folder) in webGL.
    I went through 3 different set-ups to get it work :
    - Unity 2019.3 / URP : video not displaying in the browser (but sound) as material override (unlit shader), and same issue with a renderTexture and a RawImage UI component.
    - Unity 2019.2 / LWRP : video and sound working fine with Unlit shader!
    I hope it can help someone!
     
    ilmario likes this.
  36. SeanWebber

    SeanWebber

    Joined:
    Jun 17, 2020
    Posts:
    6
    @mjamie found a solution to this on another thread. I tried it and it worked, although the video looped (which wasn't what I wanted) however the video did play on my webGL build

    https://forum.unity.com/threads/videoplayer-webgl-url-not-working.467391/
     
  37. jsleek

    jsleek

    Joined:
    Oct 3, 2014
    Posts:
    59
    Can anyone get this working on the Android version of Chrome? I can get it working on the desktop version (WebGL video playing), but just get a black screen on Android.
     
  38. LuizHRB

    LuizHRB

    Joined:
    Aug 10, 2018
    Posts:
    1
unityunity