Guide Twitch

webM transitions in XSplit (step by step guide)

webm

With the new version of X-Split (2.3) they introduced a very interesting feature for alpha channel support transitions. That opens up the door that have been closed for awhile now and that’s creating graphical transitions with video files. This is nothing groundbreaking and one time fee software like WireCast have already have this feature for awhile, there’s still a lot of people on Twitch that are using X-Split. And who know maybe this will force the hand of OBS to also start going it?

For those that don’t know I have a few years experience in video editing, motion graphics and til’ this day is still a general video codec nerd. So when I heard about the changes in X-Split I immediately wanted to test it out.

  1. webM codec
  2. Alpha Channel
  3. Exporting from After Effects
  4. FFMPEG Command Line
  5. WinFF (FFMPEG GUI)
  6. Inside XSplit

1. webM codec

What’s webM? I’ve heard people call it HMLT5 Video as well… sort of true I guess. It really is a video codec developed to be royalty free and supported in development by Google. Also it can handle alpha channels when done correctly. This will be the codec with alpha that we’re going to aim for. Why it’s so closely talked about as HTML5 Video is because it’s supported in browser by only having the tag video present.

2. Alpha Channel

after-effects-alphaThe alpha channel, or alpha, is the transparent part of a video or image. If you would look only at the alpha it would be a black and white version of the video or image. If you’re using After Effects it’s the checkered pattern, unless you have enabled the black background then it’s the black background.

When you create your transition or convert a transition you’ve found online you want to be able to see it go from all checkered to, no checkered and end back on all checkered. It’s not vital of course but let’s go for the standard functional setup and then you can experiment what works the best for you.

3. Exporting from After Effects

When you have your motion graphic transition ready, under 5 seconds long, and what to export it you need to export with the RGB+Alpha channel. I do this with After Effects, but you can use whatever program you feel most comfortable with. In the documentation for how to export, it mentions that you can use MOV or PNG Sequence. That’s a bit strange since one is a container and the other one is exporting each frame as a png image. A .mov file can be both mp4, png, jpg etc.

The way I do it is to use MOV as the container and PNG as the codec, basically it will have all of those PNG images inside the MOV container and since PNG can maintain alpha so will the MOV, this will also add the ability to export audio. That so far have worked the best for me. That means you end up with a .mov file that you then can run through FFMPEG.

If this is the first time using After Effects the best way is not to do a  Export Video but rather use the Render Queue “Composition → Add to Render Queue” and then set the correct preset and press render.

after-effects-outputThe settings I use are as follow:
Format: Quick Time
Channels: RGB+Alpha (IMPORTANT!)
Depth:  Millions of Colors+
Under “Format options…”:
Video Codec: PNG
Quality: 90 (You can go higher if you want)
Audio Output:
Turn it on or off depending if you’re using audio or not.

Depending on the amount of effects and time, go grab a cup of coffee and comeback when you hear the pling.

I’ve only tried doing this with 25fps video and not anything above that. That’s only because I don’t have XSplit Premium but I can say that using a 60fps transition at 1400 milliseconds cuts it short even if I set the transition time correctly. Again not sure if this is a limitation on XSplit in general or because I’m not a premium user. If you try it out let me know!

4. FFMPEG Command line

If you’re going to use ffmpeg as is with no added GUI then you can follow the guide step by step. Let’s at least take a look at what the command line means or rather what you get when you use it. The first is the name of the exported .mov file, then you have the webM codec libvpx that will output a 10mpbs video, after that is libvorbis  that will give you 128kpbs audio and the very last is the name that it will output. Now I haven’t experimented enough with raising the mpbs or kpbs for video and audio to say that it will work no matter what you put in there, so let’s keep it on the recommended settings for now.

This is the command line you will use if you’re going to use standard FFMPEG. This guide won’t really go into exactly how to use FFMPEG and the command line and instead I’m going to show how to use WinFF.

5. WinFF (FFMPEG GUI)

This is my favorite FFMPEG GUI for windows and that’s actually what I’m using to do my conversion. Attaching a few images to detail how you can set that up and also a link to the preset file that you can add and use.

winff-edit-preset

Edit Presets
Preset Name: XSplit
Preset Label: This will output a WebM file with Alpha for usage in XSplit
Preset Command Line:  -c:v libvpx -b:v 10M -c:a libvorbis -b:a 128K -g 1
Output File Extension: webm
Category: WebM

Then in the main window again
Add the .mov file
Select the Category in “Convert to”
Then in preset select “WebM for XSplit”
For output folder you can put the XsplitBroadcaster, that way it will end up in the right place when it’s done.
All there’s left now is to click “Convert”

winff-mainA window will appear and there will be a text and numbers going. That’s the conversion happening. When that’s done you can close the window and fire up XSplit.

Download Preset

IMPORTANT EDIT (2016)!

After you’ve exported it to a WebM file you can’t preview it in say something like VLC, Premiere or MPC. These programs aren’t made to understand how a WebM file with alpha is supposed to work so they’ll only output it with a black background. To make sure it works open it up in xsplit and add it in a regular media file.

There’s probably other programs out there that can play WebM but I don’t have any of them so if you do please let me know!

6. Inside XSplit

First of all you need to drop your transition_####.webm into the XsplitBroadcaster inside of the XSplit folder for any of this to work. The “####” are the time of your transition in milliseconds that means 1 second is 1000 milliseconds or ms. This is also the time you will need to set Transition speed at.

xsplit-transitionAfter you’ve added the transition it should show up in “View → Scene Transition → Stinger: transition_####” select the transition you want to use and then set the Transition Speed to the same length as your transition (the millisecond thing).

Now when you go from Scene 1 to Scene 2 or any other scene your transition will pop-up between your “cuts”.

A bit more

While yes this is for transitions it can also be used for transparent video in XSplit. That means you can do animated logos, animated sidebars, animated anything you can come up with that needs to have some transparency without having to key out the green color. All you need to do is add the webM as a video file.


 

If you have any questions regarding this article, have something you want me to write about or if you have questions in general you can find me on Twitter @visiblespeech. If you have business inquires you can e-mail me at daniel@livespace.se or use the contact from to start a conversation.

About the author

Daniel

Daniel

Do you need Twitch branding done the right way? I've work with both partnered and non-partnered Twitch streamers and done so for over 4 years. For me this is full time and I'm dedicated to my clients and my craft. I do both branding, visual branding and brainstorming based on understanding you, your community and your channel. If that sounds interesting to you then you should check out my Twitch services/portfolio/client list and contact me right away. twitch.livespace.se

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close