Overlapping objects on top of video?

Feb 24, 2016

Hello, was wondering if anyone else has run into this issue.... I have a video that I want to overlap part of with a shape that matches the background color of the video to hide something in the video. And this works great in the flash output, but the HTML5 version changes the color of the video background from white to grey. So you see the shape that was covering the section of the video being hidden.  =(

Is there an easy way to deal with this? Or do I just have to find the html5 versions new video background color and apply that for the HTML5 version?

12 Replies
Daniel Sposato (Philly)

Thanks for your reply Christie, but neither of these posts are exactly what I'm looking for. I have provided some pictures and the file I was doing a test from.

My stage has 2 objects on it. A short video I captured from an old Flash course:

And on top of that, there is a white shape to match the BGcolor of the video that I'm using to cover up text in the video I don't want to be seen:

Here is what I see when the animation plays in the Flash version:

And this is what I see in the HTML5 version:

The funny thing about this is that I tested this in the 4 major browsers that concerns this project (FF, Chrome, IE and Safari) and the one that I can usually count on to give me trouble (IE) is not doing this in the HTML5 version, but the other 3 are.

The file is attached if someone wants to see if it does the same thing for them and you have a suggestion as to an easy way to fix it. Please let me know. I'd really appreciate it.

Ashley Terwilliger-Pollard

Hi Daniel,

What kind of video file are you using? It seems from your images one with transparency applied? Alpha channel transparency isn't supported in HTML5 output. As a result, FLV videos with alpha channels will be encoded as MP4 videos in HTML5 output. That would account for the grey shading you're seeing and the appearance of your white box. You may want to take a look at this thread where some users discussed other ideas for converting or changing videos with transparency. 

Daniel Sposato (Philly)

Hi Ashley,

Thanks for the reply! The video in this was captured using SL2. I wouldn't know if the capture feature for SL2 applies transparency by default to the white or not in the video. I would think that the video I captured would record the white BG of the animation. I'll check out your post  and get back to you....

The posts are related to my issue somewhat, but I am not using transparency so I'm not sure why the BG of the video is being changed to grey in HTML5. It's really strange!

Ashley Terwilliger-Pollard

Hi Daniel,

Ah, thanks for the clarification - I didn't realize it was recorded in Storyline. I'm taking a look at testing your file now as well - but where did you record the animations from? I can see a slight outline/background even within the preview - so I took a look at publishing and then uploading to Tempshare here.  That link is direct to the story_html5.html output and it looked normal when viewed in Chrome. What browser were you viewing the output in? You'll want to confirm that you're viewing it in one of the supported browsers here. 

Daniel Sposato (Philly)

Thanks again! I tested the HTML5 in the 4 major browsers that concerns this project (FF, Chrome, IE and Safari) and the one that I can usually count on to give me trouble (IE) is not doing this, but the other 3 are. I got the exact same result in those 4 browsers when looking at the link you posted of my test animation.

The recording was from a flash based course that was running in FF. I just did a screen capture with SL2 that I sized to the section I needed to record.

Ashley Terwilliger-Pollard

Hi Daniel,

What version of Chrome are you using? I'm on the latest version 48.0.2564.116 and checked in in Windows 8.1 and on a Mac.  I took a screenshot of what I'm seeing in Chrome showing the link is the HTML5 link without the grey background as you shared. So I'm curious if we could isolate more about the differences with our versions of Chrome as I can't offer support for the other browsers (except Safari on Mac, which also behaved normally for me). 

Daniel Sposato (Philly)

All of my browsers are on a Windows 7 PC. My version of Chrome is up to date it seems. I have "48.0.2564.116 m". Not sure if the "m" makes a difference.

It may be possible that it's my machine. I will try looking at the link you sent on a few other machines here in the office to see what results I get and I'll let you know.

Thanks for all of your help!

This discussion is closed. You can start a new discussion or contact Articulate Support.