SWF video embedded with no transparent background

Question

I've been fighting to embed a SWF video so its cross-browser friendly. At this moment I've been using the Kroc Camen's method. So I converted the video to mp4,ogv and created an img as a fallout image if none are supported.

The problem I have is that the image is only filling up the half of the total resolution of 500x500. Before with the SWF file the background was treated as transparent and the white background was not seen. Now it creates a disturbing effect and it does not match the background. Could you give me recomendations how to proceed? How do I make that background be transparent in all formats?

enter image description here

Its giving me a nice headache :S

If you wish to check out the original swf and how it should look you can check the following link: http://rosasusaeta.com/biografia.html — Daniel Ramirez-Escudero, Jan 28 '13 at 10:16

score 1 · Answer 1 · edited May 23 '17 at 11:51

1

There is one solution for this, however I think it would be quite difficult to implement in this case, and I would recommend just making the background of your page white.

You may want to look at this question:Can I have a video with transparent background using HTML5 video tag?

edited May 23 '17 at 11:51

Community

1
1

answered Jan 28 '13 at 15:13

howderek

2,224
14
23

thank you for the help. After investigation maybe its not so worth it. For now it will only work with Firefox3.5. It seems, the only possible solution would be posting a SWF with transparency and using an image as a fallback. This would mean that the IOS devices which dont support flash will have an image, so no animation. If anybody has still any advices please let me know... – Daniel Ramirez-Escudero Feb 04 '13 at 20:11
You're welcome! I hope that browser updates will add this, allowing more of the web to interactive without the need of third party toosl like flash. – howderek Feb 05 '13 at 19:17

score 0 · Answer 2 · answered Feb 11 '13 at 08:40

As it seems there is no answer to my question due to technical reasons. It seems they still havent invented a system to have transparent background with video. SWF does support it for now so they are my only resort. If somebody finds another solution PLEASE let me know.

At the end my solution was a work around. For the Ipad I created flash content with a fallback of an image of the animation. This will mean that with other devices they will be able to see the animation but not with the animation itself. Therefore I created the following "solution":

<div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="500" id="ani.rosa1">
                <param name="movie" value="_swf/ani-rosa.swf" />
                <param name="quality" value="best" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="showall" />
                <param name="menu" value="true" />
                <param name="devicefont" value="false" />
                <param name="salign" value="" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="_swf/ani-rosa.swf" width="500" height="500">
                    <param name="movie" value="_swf/ani-rosa.swf" />
                    <param name="quality" value="best" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="showall" />
                    <param name="menu" value="true" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <img src="_swf/ani.rosa1.png" alt="Get Adobe Flash player" />
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>

SWF video embedded with no transparent background

2 Answers2