This is a tutorial on how to make your transparent videos usable In-World and how to host them for FREE.



To begin, a little explanation.

--There are 2 types of video files that will allow transparency ( .MOV and .Webm ) and only One of them is compatible with RLC. ( .Webm )


--This tutorial is intended for creating short looping objects in world and NOT for streaming videos with sound. Although you CAN use this process to stream a video, it will NOT have sound, it will loop and autoplay, and wont have controls. The code and steps for that are similar to this process but there are extra steps I will not be going over in this tutorial. If you know what you are doing, you can edit the code accordingly. Audio must be in .ogg format.


--Using this process to put transparent GIFs in-world is also possible, but it requires steps I will be touching on but not going in depth with in this tutorial as it requires software that everyone may not have access to, and is not free. (Adobe Photoshop/After Effects)



Things you will need:

• A valid Google/Gmail account
  Free with every Google account, you get 15GB of FREE storage on Google Drive. No need to even sign up, Just goto https://drive.google.com/ and sign in with your google account and your ready to go.
  
  
• A Video that is either in .Webm format OR a video you would like to convert to Webm. OR a gif you would like to convert to the .Webm format and use.
  
  
• If your Video file is not in .Webm format, you will need a converter.
  There are many many Online converters you dont need to download and can use in your browser, such as:
  Cloud Convert (support many formats also limited to 10 conversions a day per IP)
  and
  Convertio
  
  
• You can also download a converter, and I HIGHLY recommend Miro Video Converter it's FREE, Fast, and very powerful. It's also a GREAT tool to use to shave down file sizes.
  HOWEVER
  Neither MIRO or Online converters will retain transparency during conversion. So if you have/want/need transparency in your video, you will need Shutter Encoder, another FREE, powerful converter that has the ability to retain alpha channels in your video during conversion.
  These converters are both Free Donationware, a donation is not required to download or use but if you find them helpful, I'm sure the developers would appreciate it.
  
  
• Lastly, You will need a "Transparent Webm Hosting Kit" File which you can download HERE.
  This file consist of HTML and other code found on these forums posted by wonderful creators and community members. This tutorial would not be possible without them.
  

*You may require an unpacking tool such as WinRar or 7-zip if you already don't have one.


PART ONE: TRANSPARENT VIDEO FILES, WHAT?!?!?.

As I mentioned above, there are two types of video formats that support transparency. What this means is that they include what is called an "alpha channel" which is information in the video file that tells which parts of the video should be "see through". Regular video files do not contain this information.

So where do you get theses "transparent video files"? ( .mov and .webm )

They can either be created in editing software like Adobe After Effects, or Photoshop... things like that. You can also find them on the internet.
Making these files basically consist of taking a video, erasing what you want to be "see through", and exporting it as a .mov to retain that transparency. then converting it to a Webm for use In-World.

I will not be going over how to use any other converter I mentioned above except for Shutter Encoder because they are all pretty straight forward, but this one has an extra step to make sure it stays transparent. None of the other converters I have mentioned except Shutter Encoder will retain the transparency in your file during conversion.


If you have a .MOV file with transparency, Open up Shutter Encoder and Goto PART TWO.

If you have or want to use a GIf with transparency:

You will have to import it into Adobe After Effects and Render it as a Quicktime .MOV

OR

You can load the GIF into Adobe Photoshop (CS6 or higher) and once loaded goto File> Export> Render Video. In the video render setting window, make sure to select "Quicktime" in the format selection and also make sure in the Alpha setting, "Straight, Unmatted" is selected, and render the video. After this, Open up Shutter Encoder and Goto Part 2.

If you have a video file you want to host in world that does not require transparency, all you need todo is use one of the free converters I mentioned above, convert the video to a .webm, and Goto PART THREE.


PART TWO: SHUTTER ENCODER

Once you have Shutter Encoder opened, Click the "Browse" Button and select your .Mov video file.


Next, Change the Format in the "Choose Function" box to "VP9" under "Output Codec" in the drop down menu.



Make sure the Ext. ".webm" is selected


To the Right, you can change some settings of your output file if you wish. this is entirely up to you and optional. After that, select the "Advance Features" drop down.


Make sure "Enable alpha channel" is selected.


Now Click the "Start Function" button and the conversion will begin. How long it takes will depend on filesize and PC performance. Once it is done, a tone will sound. The file will be in the same location your original video file is in.


You now have a .webm with transparency and can Goto PART THREE.


PART THREE: HOSTING YOUR FILE ON GOOGLE DRIVE


Goto your Google Drive account, create a new folder, and give it a name that describes the video you would like to host.




Once created, Right-click the new folder, and choose "Share"


Click on "Change this link" so that this folders contents can be visible by others in world.


Don't share this link, and this is NOT the link to use in world. Just click "Done"


Navigate to the "Transparent Webm Hosting Kit" I included in this tutorial. You may need to Unpack/Un-zip it first.


Make a copy of the whole folder and rename it to something similar or the same as your new Google Drive folder.


Go inside the folder, and then inside the "video" folder.


Paste your video inside this folder, and Copy the name of the video file EXACTLY.
Example:


Now go back into the previous folder directory, and right-click on the "BLANK INDEX" file. Choose "Open with" and select "Notepad"



In "Notepad",Scroll down to the bottom of the text, and there will be TWO lines of text that need to be changed.
Highlight and paste the video file name you copied to BOTH lines of text.


Now choose "File" then "Save As"


**IMPORTANT***
Name the file similar to your new Google Drive Folder and YOU MUST type ".html" at the end of your chosen filename. Then hit Save.


If everything was Saved correctly you will have 2 HTML files. If so, you may delete "BLANK INDEX" from this folder, it is no longer needed.


Double-Click your new Google Drive folder to go in it.


Now highlight ALL 4 items ( css, js, video, and new index you made) from your windows explorer, and drag them into your new Google Drive folder.


The files will now be uploaded to your Google Drive, speeds depending on filesize and internet connection.

While they upload, navigate to https://drv.tw/ (DriveToWeb) in a new browser tab.
This will bring you to DriveToWeb, an application that will allow your HTML code to be read, interpreted, and hosted on google drive for free while in world.
You will be asked to sign into your Google Drive account, and give permission for the files to be used.
MAKE SURE YOU SIGN INTO THE SAME GOOGLE ACCOUNT YOU PUT YOUR FILES ON.


That's it! If these steps were followed, your video is now hosted and live! Your links will be visible In world.
Return to https://drv.tw/ (DriveToWeb) and sign into Google to access your links. Please ignore the error in the screenshot, it is only 15GB you get FREE from Google Drive.


Simply Take these Links and place them into a Chromium script on a prop in world. Make sure to turn off "Interactive" and "Camera Lock"


THINGS TO NOTE:

If you choose to change the video, you can either delete the google drive folder made in this process, or change the video file, but you must ALSO REMEMBER to change the Filename to match in the BLANK INDEX portion. Because it takes time for the video to update on the server anyways, it easier to just repeat this process from scratch.

Enjoy! Have Fun! Create!
Make a New 3D Sign Perhaps?


Make some new friends?


Hell, Burn Down your bar if you want!


Whatever you wanna do, now you can!


If this tutorial helped you create something I would love to see it! Possibilities using this are almost endless!!

KiNk InK! Express Yourself!

Just have your cake n eat it!