Just wondering if anyone has had any luck getting a video clip with a transparent background into Storyline 360 and if so, what format did you use so that 360 maintains the transparency.
I used Zoom as it allows me to replace my background, but you can probably replicate in other video conferencing software as well.
You could also use a green screen, key out the background, and replace with a solid color. To allow you to more cleanly blend the video background with the Storyline project background, you would want to replace the background digitally vs. using a solid cloth or paper color backdrop during a video shoot.
Working in Storyline:
Insert your recorded video with the replaced background color into your Storyline project.
Adjust the background color of your Storyline project to match the video background color.
You must preview/publish your project now, to ensure the background color actually matches/aligns in your final output. Make any publishing adjustments to video and image quality setting now to ensure an accurate color match.
Depending on what you're doing with the video and background in your project, you can also use matching color shapes to blend the background, when/if needed.
From there, the video asset can be treated almost like a regular object in your project.
Let me know if you have any other questions or if you give it a try and run into any issues - reach out at cory.warshawsky@gmail.com
Credit to Chris Hodgson of Discover Learning for his video on 3D Parallax Hover Effects Using Tilt.JS for the idea of using the Alt text to mark a shape in Storyline as being the position where you want the video to go. That video inspired me to start thinking about what other things could be done once Storyline elements could be located easily from JavaScript. Which is what led me to work on the transparent video solution.
If you try out this solution and run into any issues feel free to reach out to me directly. I am happy to help you resolve: https://www.linkedin.com/in/mattkurtin/
Thanks for the heads up on the format. Should be able to use the same JavaScript approach to attach other formats. Follow this example of how to add multiple video formats within a single video tag. The browser will choose the first source it supports.
Now it is 2024 and this problem isn't solved. There are a lot of words from the staff ensuring that their customers are important for articulate. But fact is nothing happens. It was / is the same problem with svg images. Over years nothing happens. And til now using svg images is causing more trouble then benefit. All in all articulate is not possible to deal with formats that are common and up to date. It is erster to live in the past then support the own customers concerning valid complaints. Flashvideo as a solution to work with transparent video background in 2024 is really poor and disappointing. It seems to be more important to integrate AI support in Rise instead solving very old todos. Hey, articulate I hope your AI features are able to make the background of videos transparent. Kind regards
yes it is 2024 and Apple (Safari) prevents the use of a free and open video format that supports transparent video - they still do not support WebM VP8/VP9 format
As well as all others, I'd like to chime in for this feature of a transparent BG. Or the ability to key out a green BG. I'm using the same BG as the slide in the video, but this is not ideal.
Still waiting for the Quicktime MOV alpha channel transparency feature. Is there a reason why this has not been added, especially after flash was no longer supported? Users have been asking for this for over a decade now.
I found that Matt's Kurtin's post is a practical solution to this issue. I understand that removing an existing background color with tools like After Effects or similar and converting video formats can be time-consuming, but the effort is worthwhile. Once you've converted your MOV file to WebM for playback in Chrome, you can encode the same MOV file to HEVC directly on your Mac to ensure compatibility with iOS devices. Follow his tutorial on integrating multiple video formats within a single video tag in Storyline. Although I don't own any Apple devices to test whether HEVC playback is successful, I've attached a brief video demonstrating how WebM transparent video functions within Storyline.
So need this, as Justin V mentioned above. Need video codecs that have transparency (alpha channel) to be supported in Storyline. Please. Or include effects that emulate the need.
93 Replies
Happy to Alencar!
Recording the video:
Working in Storyline:
Let me know if you have any other questions or if you give it a try and run into any issues - reach out at cory.warshawsky@gmail.com
This post was removed by the author
Bump to keep the topic of interest known to the Articulate Team.
Hi, I'd also like to see this feature added to Storyline. If it has been, please can someone educate me?
the cause are the browsers - there is only ONE video format that is playable on ALL browsers -> mp4
mp4 does not support transparency
Here's a workaround I have developed to add transparent videos using JavaScript:
https://www.innovativelg.com/blog/2023/11/enabling-videos-with-transparent-backgrounds-in-articulate-storyline/
OMG! This will be a game changer. Thank you so much. I will try it out.
Thanks Matt, if this works, lots of people will be very happy!
Credit to Chris Hodgson of Discover Learning for his video on 3D Parallax Hover Effects Using Tilt.JS for the idea of using the Alt text to mark a shape in Storyline as being the position where you want the video to go. That video inspired me to start thinking about what other things could be done once Storyline elements could be located easily from JavaScript. Which is what led me to work on the transparent video solution.
If you try out this solution and run into any issues feel free to reach out to me directly. I am happy to help you resolve: https://www.linkedin.com/in/mattkurtin/
with one small limitation - Apple iOS does not play webm video format
for transparent video on iOS HEVC/H.265 should work (but still needs to be tested with the different ios versions)
Thanks for the heads up on the format. Should be able to use the same JavaScript approach to attach other formats. Follow this example of how to add multiple video formats within a single video tag. The browser will choose the first source it supports.
https://www.w3schools.com/tags/tag_video.asp
Now it is 2024 and this problem isn't solved. There are a lot of words from the staff ensuring that their customers are important for articulate. But fact is nothing happens. It was / is the same problem with svg images. Over years nothing happens. And til now using svg images is causing more trouble then benefit. All in all articulate is not possible to deal with formats that are common and up to date. It is erster to live in the past then support the own customers concerning valid complaints. Flashvideo as a solution to work with transparent video background in 2024 is really poor and disappointing. It seems to be more important to integrate AI support in Rise instead solving very old todos. Hey, articulate I hope your AI features are able to make the background of videos transparent. Kind regards
yes it is 2024 and Apple (Safari) prevents the use of a free and open video format that supports transparent video - they still do not support WebM VP8/VP9 format
Can only echo what has been requetsed so many times, to stay in thouhc with new trends/learner expectations, this really needs to be supported
Hello,
As well as all others, I'd like to chime in for this feature of a transparent BG. Or the ability to key out a green BG. I'm using the same BG as the slide in the video, but this is not ideal.
Any updates for this thread?
Still waiting for the Quicktime MOV alpha channel transparency feature. Is there a reason why this has not been added, especially after flash was no longer supported? Users have been asking for this for over a decade now.
Six years later and more people needing this feature. Does anyone have an update?
I found that Matt's Kurtin's post is a practical solution to this issue. I understand that removing an existing background color with tools like After Effects or similar and converting video formats can be time-consuming, but the effort is worthwhile. Once you've converted your MOV file to WebM for playback in Chrome, you can encode the same MOV file to HEVC directly on your Mac to ensure compatibility with iOS devices. Follow his tutorial on integrating multiple video formats within a single video tag in Storyline. Although I don't own any Apple devices to test whether HEVC playback is successful, I've attached a brief video demonstrating how WebM transparent video functions within Storyline.
So need this, as Justin V mentioned above. Need video codecs that have transparency (alpha channel) to be supported in Storyline. Please. Or include effects that emulate the need.
This post was removed by the author