Enabling Videos with Transparent Backgrounds in Articulate Storyline
Using a Workaround to Support Alpha Transparency in Storyline
Our team at Innovative Learning Group (ILG) has been working with Articulate Storyline since the first version was released in 2012. Over the 11 years since then, I’ve been impressed with how Storyline has been updated with a ton of great new features. However, there’s one useful feature that hasn’t been added yet —support for videos with alpha channel transparency. Based on this Articulate Community post, it seems like many others are looking for this feature too.
One reason Storyline doesn’t support transparent backgrounds may be because it uses MP4 for maximum compatibility. Videos compressed as MP4 with the H264 codec don’t support alpha transparency. Read on to see how to use JavaScript to insert a transparent video in the WebM format.
Where can I see a sample of Storyline with a video with a transparent background?
https://review.innovativelg.com/Transparent_Video/index.html
First, choose a background color, then select Play Video.
Why would I need a video with a transparent background?
A video with alpha transparency generally has a much larger file size for the same quality compared to a video flattened to a specific background image or color. You shouldn’t use alpha transparency if the background behind the video won’t change. However, the flexibility to have a transparent background could be invaluable in cases where you have interactivity changing the background and you want the video to play over the top. A good example would be if you were building an e-learning course with several different challenges and you wanted to use the same fireworks video at the end of each challenge with different scenes behind the fireworks.
How will I know if my learners have browsers that support the WebM format?
A good source to check when you want to know what features are supported by common browsers is CanIUse.com. To check WebM format specifically, visit https://caniuse.com/?search=webm.
Where can I find videos with transparent backgrounds?
If you already have a source of stock videos, check to see if it provides an option to search for videos with transparent backgrounds and/or videos with alpha transparency. For most stock sites, the number of videos with background transparency is very small compared to the overall number of videos. In addition, you may find that the transparent videos they provide are in a high resolution MOV format, such as ProRes 4444, which is meant to preserve quality before compositing with other elements. As a result, this format isn’t good for direct playback in browsers.
How can I convert from MOV format or make my own video with alpha transparency?
If you have Adobe Creative Cloud tools, such as Premiere or After Effects, you can use chroma keying to remove an existing background color to make it transparent. Another option is to start with a transparent background and add other elements over parts of that background. You can also use Adobe Media Encoder to compress a video you’ve created with transparency, but this requires a third-party plug-in. I tested this using the fnord Open Move Plug-In for Premiere. There are also other options available at WebM.
Once I have a WebM file with alpha transparency, how do I insert it into Storyline?
You’ll need to use some JavaScript to insert the WebM video into Storyline. I started by placing a transparent rectangle on the screen to mark where I wanted the video to load. Following an approach suggested in a tutorial for building 3D parallax effects using Tilt.JS, I then used the Accessibility Alt text to mark this rectangle as “videoMarker.” This approach opens all kinds of opportunities to add interactivity using the Document Object Model (DOM) instead of just Storyline layers, triggers, and states. A key point to keep in mind is that anything that can be represented in a HTML page before the page is loaded can also be added programmatically using DOM methods. W3Schools is a great place to learn more about the DOM.
To find the established marker from JavaScript, use this JavaScript code:
const VIDEO_MARKER = document.querySelector(‘[data-acc-text = “videoMarker”]’);
Once you find the marker, use the following code to programmatically create a video tag, provide the path to the video, set the video properties, and append the video as child of the videoMarker.
Altogether, it looks like this:
Can I have the source code to your example Storyline file?
The video licensed for this sample can’t be distributed for reuse. You must license the fireworks video directly from Getty Images or replace it with another transparent video of your own choosing. You can download the latest version of the color picker I used to change the background from Huebee. Everything else from this sample can be downloaded here.
After you download and extract, you will have a folder Copy_After_Publishtransparent_video with one file called ilg.js. Add your video file and the Huebee CSS and JS files, so your folder looks like this:
Then, each time after you publish your STORY file, copy this transparent_video folder from the Copy_After_Publish folder to the top level of the published course like this:
______________________
Additional Resources
Blog: Let’s Talk Video
Blog: Saving Time With Storyline
Blog: A Brief Introduction to Unity for Storyline Developers
Podcast Episode: Advanced Storyline Tips and Tricks
Podcast Episode: Animate Your Ideas
