Search Unity

Unity Tiny Video

Discussion in 'Project Tiny' started by unity_XsRF3-UIqh0bFg, Dec 18, 2018.

  1. unity_XsRF3-UIqh0bFg

    unity_XsRF3-UIqh0bFg

    Joined:
    Dec 18, 2018
    Posts:
    1
    I was trying to use the UTiny.video and I have no ideia why is it not working. I follow the steps from this link:
    https://docs.unity3d.com/Packages/com.unity.tiny@0.13/manual/module-video.html

    • Create a video player entity

    • Attach a Video Player component

    • Attach a Video Clip component

    • Specify a Source to the video clip
    Sounds easy yeah but not working...

    First Try:
    upload_2018-12-18_14-8-38.png

    Error:
    upload_2018-12-18_14-10-37.png


    Ok... probably is the path of the video

    Lets try again:
    upload_2018-12-18_14-13-8.png

    And same error... After that I try absolute path and SAME error again...

    So... Someone knows what is wrong?
     
  2. gwenaelle_unity

    gwenaelle_unity

    Unity Technologies

    Joined:
    Jul 24, 2018
    Posts:
    2
    Yes, there are some issues right now with adding video assets to a project. We are working on a fix and will release it in the next hotfix.
     
  3. MagicMiikka

    MagicMiikka

    Joined:
    Aug 23, 2014
    Posts:
    8
    The project also states that one should "schedule" the video player and I think having an example script for basic scheduling instead of "go figure out where the documentation is"
    If this is a pre-requisite for it to work, why isn't it in the "How to use it" documentation?

    https://docs.unity3d.com/Packages/com.unity.tiny@0.14/manual/module-video.html

     
  4. vincismurf

    vincismurf

    Joined:
    Feb 28, 2013
    Posts:
    191
    Until the documentation is finished look at the class's comments. . . . for instance in Visual Studio Code type out the class

    ut.Video.VideoPlayer. right click on VideoPlayer and select go to definition
     
    MagicMiikka likes this.
  5. sahilverma5

    sahilverma5

    Joined:
    Mar 1, 2019
    Posts:
    5
    When will the hotfix will be released as video playing is still not working
     
  6. lauro_cesar

    lauro_cesar

    Joined:
    Feb 3, 2017
    Posts:
    3
    Go to projects settings and drop the video to assets tab...
     
  7. sahilverma5

    sahilverma5

    Joined:
    Mar 1, 2019
    Posts:
    5
    While embedding the video path , I m still getting this error
    Also, I have already tried with extension too . (startup_mp4.mp4)

    upload_2019-3-4_10-20-44.png

    Code I Used is :
    upload_2019-3-4_10-23-31.png
     

    Attached Files:

  8. sahilverma5

    sahilverma5

    Joined:
    Mar 1, 2019
    Posts:
    5
    Component in Entity Used :
    upload_2019-3-4_10-29-21.png
     
  9. sahilverma5

    sahilverma5

    Joined:
    Mar 1, 2019
    Posts:
    5
    I have already done this. Still finding it difficult
    Guide Me
     
  10. lauro_cesar

    lauro_cesar

    Joined:
    Feb 3, 2017
    Posts:
    3
    Go to:

    Edit -> Projects Settings -> Tiny -> Assets
     

    Attached Files:

  11. josterday

    josterday

    Joined:
    Jan 22, 2018
    Posts:
    51
    Thanks Lauro. Looks like the default video is showing there, but how do we add assets to that section of the Project Settings? There's no way to drag and drop and the new videos are not auto-added when placed into the "src" field.
     
    Antonia-Chimp likes this.
  12. Antonia-Chimp

    Antonia-Chimp

    Joined:
    Apr 1, 2019
    Posts:
    11
    I was able to drag the videos into the assets in the project settings, but I cant figure out the correct string for the src. I always get an 404 and a warning saying: "assets\open.mp4 has unknown extension, included as text/plain in assets"
     
    Last edited: Apr 10, 2019
  13. josterday

    josterday

    Joined:
    Jan 22, 2018
    Posts:
    51
    Here is what I did to get this working at runtime. Simple play/loop action:

    - Create new Entity Group
    - Create new Entity (label "VidPlayer")
    - Add "VideoPlayer" and "VideoClip" Components to new Entity
    - Under "clip" field (within VideoPlayer Component) select the new Entity ("VidPlayer")
    - Add "Assets/nameofyourvideo.mp4" to the "src" field
    - Choose "Unloaded" under "status" pulldown
    - Add your video file to the Unity Project under your Assets Folder > Name of Tiny Project

    - Navigate to Project Settings > Tiny > Assets
    - Add your video by dragging it in to the list of assets
    - Right click the video and choose "Override Export Settings"
    - Uncheck "Embedded"
    When starting with a fresh project, I sometimes have to add a random asset first (such as a font or image/sprite) and then it allows me to drag the video file from my Project Window to the Project Settings Panel (beneath the search bar is the list/drop area).
     
    Antonia-Chimp likes this.
  14. Antonia-Chimp

    Antonia-Chimp

    Joined:
    Apr 1, 2019
    Posts:
    11
    Hey I got it working now, thanks ! But I was wondering if I can put UI above the video which is playing and if click events still fire...
     
  15. Zionisias

    Zionisias

    Joined:
    Apr 23, 2019
    Posts:
    40
    Hey Antonia-Chimp,

    The way that Unity Tiny renders video, is by creating a video html-element (You can see this by running your game and pressing F12 in the browser. When opening the <body> tag, you should see a <video> tag corresponding with your video.). This means that the video is not actually playing within the game, but is rendered as an overlay over the game. And this in turn means that every entity that renders in the game will be rendered beneath the video.

    However, there is a workaround to be able to still render elements over the video, but this workaround isn't very pretty, and still has its limits. The workaround is to place the video-htmlelement underneath the canvas-htmlelement (This element is responsible for rendering everything in the game), and changing a setting for your camera.

    To place the video-htmlelement underneath the canvas-htmlelement, you could use a system which listens for a new component (Add this component to the video-entity), which you can name something like "RepositionVideoComponent". The system should execute some steps, which I will provide below, and then remove the component. This will cause the system to only run once.

    There are two things that have to be done within the system:
    1. Find your video-htmlelement. There are a few ways of doing this. How I did it in my project is by searching for a matching src:
      Code (CSharp):
      1. private findHTMLVideoElement(src: string): HTMLElement {
      2.     let videoElements = document.getElementsByTagName("video");
      3.     for (let i = 0; i < videoElements.length; i++) {
      4.         const element = videoElements[i];
      5.         if (element.src === src) {
      6.             return element;
      7.         }
      8.     }
      9. }
    2. Adjust the z-index in the style-attribute of the video-htmlelement to a z-index smaller than the one of the canvas-htmlelement:
      videoElement.style.zIndex = -1;
    The last step is to set the clearFlags of ALL the camera's you are using to 'nothing' or to 'solid-color' with an alpha value of 0 on the color. The clearFlagss will tell the camera what to render in the background, so if a solid color would be rendered, the video-htmlelement behind the canvas-htmlelement would not be visible.

    When you followed all the steps, it should be possible for you to put buttons or other UI-entities over the video. As mentioned before however there are some limitations to this solution:
    1. All entities in your game will now render in front of your video. There is currently no simple way to render entities in front of the video and underneath the video at the same time.
    2. Clicking the video is no longer possible. Again there are a few workarounds for this aswell, but they go very indepth.

    Sorry for the long post, but with how the video-functionality is currently implemented, there are a lot of limitations which will all require their own indepth fixes. ;)
     
    DavidHutch and Antonia-Chimp like this.
  16. Antonia-Chimp

    Antonia-Chimp

    Joined:
    Apr 1, 2019
    Posts:
    11
    Hey!

    Thank you for your long reply ! I tried it immediately and I wasnt able to find any elements with
    Code (CSharp):
    1. let videoElements = document.getElementsByTagName("video");
    As well as it doesnt know style of the element
    Code (CSharp):
    1. element.style.zIndex = -1;
    Can you help?


     
  17. Zionisias

    Zionisias

    Joined:
    Apr 23, 2019
    Posts:
    40
    You should be able to find your video element with:
    let videoElements = document.getElementsByTagName("video");

    Make sure that you have an entity with the VideoClip and VideoPlayer components currently in your game before you execute the line of code.
    You should also check with F12 (On chrome at least, I don't know if the shortcut for other browsers), and look under the tab "elements" if there is a <video> tag in your <body>.
    It should look something like this:
    If it isn't there, your entity with the video-components isn't spawned yet.

    Now on why it does not recognize the "element.style": This is probably because your script does not know that the element is of type HTMLElement. That is why the return type of the method I provided in the previous post was set to HTMLElement.
    Code (CSharp):
    1. private findHTMLVideoElement(src: string): HTMLElement {
    You could make sure that your script knows that it is of type HTMLElement by declaring your element variable like this:
    Code (CSharp):
    1. let element: HTMLElement = ...
    I hope this helps!
     
    Antonia-Chimp likes this.