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?
Hi, Daniel -- Thanks so much for reaching out here! In order to provide an illustration of what you've described here, would it be possible for you to share your file so others can check it out?
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.
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.
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!
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.
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.
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).
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.
So it looks like it's my laptop. I looked at your link in Chrome on 2 other Windows 7 laptops and there is no grey area showing up. Very strange. Gonna try reinstalling browsers on my laptop to see if it resolves the problem. Thanks again!
I had a few other colleagues test it on Win 7 and 10 and they saw the same as me. The slightest/faintest background edge but not the full grey that you showed. So if you're able to narrow it further to your computer, please feel free to let us know and we'll keep investigating.
12 Replies
Hi, Daniel -- Thanks so much for reaching out here! In order to provide an illustration of what you've described here, would it be possible for you to share your file so others can check it out?
And perhaps this post or this discussion over here could provide some assistance, as well. Please let us know!
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.
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.
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!
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.
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.
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).
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!
No problem Daniel and I'll see if I can get anyone else to test in Chrome Windows 7 as well.
So it looks like it's my laptop. I looked at your link in Chrome on 2 other Windows 7 laptops and there is no grey area showing up. Very strange. Gonna try reinstalling browsers on my laptop to see if it resolves the problem. Thanks again!
Hi Daniel,
I had a few other colleagues test it on Win 7 and 10 and they saw the same as me. The slightest/faintest background edge but not the full grey that you showed. So if you're able to narrow it further to your computer, please feel free to let us know and we'll keep investigating.
Looks like we were replying at the same time Daniel!
This discussion is closed. You can start a new discussion or contact Articulate Support.