Search Unity

How to play videos in the new Project Tiny?

Discussion in 'Project Tiny' started by Zindea, Jan 20, 2021.

  1. Zindea

    Zindea

    Joined:
    Mar 8, 2015
    Posts:
    25
    I know that in the old version you just had to pull an mp4 file into the scene and it would create the videoPlayer entities for you and play it right away.

    Since that doesnt seem to work anymore how do we have to do it :(?
    I cant get the simplest videos to play in my WebAssembly Build. Is there a special way I have to include the file rn maybe?
     
  2. AbdulAlgharbi

    AbdulAlgharbi

    Unity Technologies

    Joined:
    Jul 27, 2018
    Posts:
    319
    Hi
    it used to be supported in the typescript version of tiny but we stopped supporting video playback with the C# version
    It's in our features requests list but there is no ETA on when we will bring it back
     
  3. Zindea

    Zindea

    Joined:
    Mar 8, 2015
    Posts:
    25
    Ok. I guess I will have to create my own javascript implementation then :)
     
  4. gtk2k

    gtk2k

    Joined:
    Aug 13, 2014
    Posts:
    178
    By drawing from js to the texture, I was able to do it for the time being.
     

    Attached Files:

  5. newguy123

    newguy123

    Joined:
    Aug 22, 2018
    Posts:
    848
    cool, could you tell us some more on how to do that please?
     
  6. gtk2k

    gtk2k

    Joined:
    Aug 13, 2014
    Posts:
    178
    (I'm still not sure if Project Tiny can use GetNativeTexturePtr() for Texture. If anyone knows, please let me know.)

    @newguy123
    I don't know how to use GetNativeTexturePtr() of Texture in Project Tiny, so I checked the index of Texture of Ballonn one by one from GL.textures.
    Balloon's Texture Index changes every time you run it, so
    Every time I reload, it is rendered in something other than Balloon.
    The code that renders the video.
    Code (JavaScript):
    1. var GetWebGLTextureLib = {
    2.     $utils: {
    3.  
    4.     },
    5.     GetWebGLTexture: function () {
    6.         debugger;
    7.         var video = document.createElement('video');
    8.         video.loop = true;
    9.         video.src = 'BigBuckBunny.mp4';
    10.         video.muted = true;
    11.         video.load();
    12.         video.play();
    13.         window.idx = 13; // 11 Baloon 14 flag
    14.         // var btn = document.createElement('button');
    15.         // btn.textContent = 'cnt';
    16.         // btn.style.position = 'absolute';
    17.         // btn.style.zIndex = 100000;
    18.         // btn.style.left = btn.style.top = 0;
    19.         // btn.onclick = function(evt) {
    20.         //     window.idx++;
    21.         //     console.log(window.idx);
    22.         // };
    23.         // document.body.appendChild(btn);
    24.  
    25.         var raf = function () {
    26.             requestAnimationFrame(raf);
    27.             var webglTextures = GL.textures.filter(tex => tex && tex.constructor.name === 'WebGLTexture');
    28.             if(!webglTextures.length) return;
    29.             webglTextures.forEach(function (tex, i) {
    30.                 if(i !== window.idx) return;
    31.                 GLctx.bindTexture(GLctx.TEXTURE_2D, tex);
    32.                 //GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
    33.                 GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, video);
    34.                 GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_MAG_FILTER, GLctx.LINEAR);
    35.                 GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_MIN_FILTER, GLctx.LINEAR);
    36.                 GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_WRAP_S, GLctx.CLAMP_TO_EDGE);
    37.                 GLctx.texParameteri(GLctx.TEXTURE_2D, GLctx.TEXTURE_WRAP_T, GLctx.CLAMP_TO_EDGE);
    38.             })
    39.         };
    40.         raf();
    41.     }
    42. };
    43. autoAddDeps(lib, '$utils');
    44. mergeInto(LibraryManager.library, GetWebGLTextureLib);
    Create a folder called "js ~" under * .asmdef, save this code in the "js ~" folder with an appropriate file name (extension is * .js), build.
    and place the video file in the same location as the built html, and rewrite the "BigBuckBunny.mp4" part in the code to the placed video file name.
    It may be rendered in other than Balloon, but in that case, please reload.
     
    newguy123 likes this.
unityunity