Skip to main content

Playout

What kind of media can I playout?​

CasparCG provides different media-producers on stacked layers. So it is possible to playout a video and then layer an image and a graphic-template on top of that all in one go.

Video, Images, Audio​

For media files, CasparCG is using ffmpeg. This provides a lot of codecs and filetypes.

This is just a tiny excerpt from all the supported file formats:

Video: h264 (.mp4), ProRes 422 (.mov), ProRes 4444 - with Alpha-Channel(transparency)(.mov)
Images: JPEG (.jpg), PNG - with transparency (.png), TIFF - with Alpha-Channel (.tif), Targa - with Alpha-Channel (.tga)
Audio: PCM (.wav), mp3 (.mp3)

CasparCG is supporting multi track audio and transparent video/images.

info

CasparCG can generate a premultiplied Fill&Key signal from transparent media and templates with an extra channel.
You need to configure this in the caspar.config / CasparLauncher

HTML - Templates​

The idea of HTML-templates is simple:
If a website renders texts, images and animations in realtime - why not use it for broadcasting?

This why CasparCG comes with a Chromium Browser.

When you playout an .html file (template) CasparCG will start an instance of this browser and load the webpage. It's that simple.
If you're familiar with web-development you can start creating your first template by just writing some html,css and js.

Instead of navigating through a webpage with your mouse, CasparCG triggers javascript functions while it plays the animation.

This is how it works:​

When you start the playout of an HTML-template with CasparCG, it will:

  1. Load the webpage
  2. Trigger two javascript functions on the webpage:

  • update(data) CasparCG sends the data from the Client ("key" and "value") to the webpage as xml or json.
    If you want to use this data in your HTML-template, all you need to do is to write an update(data) function in javascript and e.g. change some text elements based on this data.

  • play() You can use this to start the animation. Create a play() function in the template and start some html/css-animation when play() is called.

This is how it works.

CasparCG can also trigger other functions:

  • next() is called when sending the NEXT Command from the Client (can be used to reveal the next animation of your template)
  • stop() is called when sending the STOP Command from the Client (can be used to start the outAnimation in your template)

If you are a developer you can build powerful templates like, lowerthirds, scoreboards, tables, etc.

info

You don't have any experience with coding? Don't worry. This is where Ferryman comes into play. It enables you to build dynamic and also very powerful templates using AfterEffects!