My research in this forum seems to indicate than and mp4 video can NOT have a transparent background in Storyline. Only and flv with alpha channel. Is this correct?
I can see from the inquiries that transparent background support in video is very important to storyline users.
I'm pretty sure my clients will NOT approve flv video because they want apple users to access on phone and iPad.
The FLV videos will be encoded to mp4 during the published process if you're publishing for HTML5, and as such the transparency would be removed as described here and indicated in the chart below:
* For a list of supported video file formats, click here.
One problem is that MP4 doesn't support alpha channels. VP8 is the only codec that supports alpha channels (FLV uses VP8). There is a solution that works in modern browsers to subtract a channel in real-time using HTML5 canvas. Unfortunately, the resulting mask is kind of chunky. It's also computationally intensive. Video quality and frame rate takes a hit even at this small size. Cranked up to a larger size, I doubt the browser would be able to keep up processing pixels in real time.
Certainly possible. Just not optimal.
This also poses a problem for a significant number of browsers still active. IE8, IE9, and likely IE10 won't play nice. There might be other browsers that will also not play nicely.
I'm glad Steve was able to provide you an alternative here, and I don't know where this issue stands in terms of being included in a future release of Storyline - but you're always welcome to share your thoughts on features you'd like to see by submitting a feature request here to our product development team.
Does flv work for you in SL 2? I had flv animations with transparent background that worked OK in older browsers (i.e. non HTML5) in a Storyline 1 project. But the same animation now has a black box in Storyline 2, so I'm wondering what changed (as it isn't the animation in flv that changed)...?
I've submitted the feature request, thanks Ashley. Fingers crossed we'll see that implemented rather sooner than later. This would greatly improve the ease of 'gamifying' course work.
In the meantime, my work around is to create the animations by including the basic background and then layering objects on top of the video. The main draw backs are increases in video sizes and that matching the background on each animation 100% to the standard one in the project isn't possible. So for the very attentive eye, the background 'jumps' a little when the video starts.
The perfectionist in me hates that, but hey, better than not getting the animations in at all...
Depending on the size of your video one of the workarounds I have used is a frame animation. I will create a transparent .GIF file (for example) with a single animation loop and use triggers and some still frame to give the illusion of replaying.
9 Replies
Hi Kristin,
The FLV videos will be encoded to mp4 during the published process if you're publishing for HTML5, and as such the transparency would be removed as described here and indicated in the chart below:
* For a list of supported video file formats, click here.
Hi Kristin & Ashley,
I'm stuck with this issue as well.
@Ashley: Are your developers working on solving this, so that transparent background video/animations will work across all players/browsers?
If yes, any idea by when it'll work?
If no, can you please put that up as a feature request? I think that would be really important for many of us.
Either way: do you have any ideas for work arounds in the meantime?
One problem is that MP4 doesn't support alpha channels. VP8 is the only codec that supports alpha channels (FLV uses VP8). There is a solution that works in modern browsers to subtract a channel in real-time using HTML5 canvas. Unfortunately, the resulting mask is kind of chunky. It's also computationally intensive. Video quality and frame rate takes a hit even at this small size. Cranked up to a larger size, I doubt the browser would be able to keep up processing pixels in real time.
Certainly possible. Just not optimal.
This also poses a problem for a significant number of browsers still active. IE8, IE9, and likely IE10 won't play nice. There might be other browsers that will also not play nicely.
Agreed with Steve. Until a new cross-platform codec emerges, achieving acceptable chroma keying in all devices is unlikely.
Hi Anja,
I'm glad Steve was able to provide you an alternative here, and I don't know where this issue stands in terms of being included in a future release of Storyline - but you're always welcome to share your thoughts on features you'd like to see by submitting a feature request here to our product development team.
Does flv work for you in SL 2? I had flv animations with transparent background that worked OK in older browsers (i.e. non HTML5) in a Storyline 1 project. But the same animation now has a black box in Storyline 2, so I'm wondering what changed (as it isn't the animation in flv that changed)...?
I've submitted the feature request, thanks Ashley. Fingers crossed we'll see that implemented rather sooner than later. This would greatly improve the ease of 'gamifying' course work.
In the meantime, my work around is to create the animations by including the basic background and then layering objects on top of the video. The main draw backs are increases in video sizes and that matching the background on each animation 100% to the standard one in the project isn't possible. So for the very attentive eye, the background 'jumps' a little when the video starts.
The perfectionist in me hates that, but hey, better than not getting the animations in at all...
Thanks Anja for submitting the feature request and sharing a bit of a workaround here for others who may come across this thread.
Depending on the size of your video one of the workarounds I have used is a frame animation. I will create a transparent .GIF file (for example) with a single animation loop and use triggers and some still frame to give the illusion of replaying.
This discussion is closed. You can start a new discussion or contact Articulate Support.