Flowplayer wmode

[GoogleCodeExporter]

What steps will reproduce the problem?
1.
2.
3.

What is the expected output? What do you see instead?

What version of the product are you using? On what operating system?

Please provide any additional information below.

Original issue reported on code.google.com by willh...@gmail.com on 9 Apr 2010 at 10:24

[GoogleCodeExporter]

Whoa, sorry, hit enter too soon!

Basically, I'm wondering: how can I set the Flowplayer wmode to "opaque"? I've 
got some CSS popup menus that 
keep displaying under the flash player, and in the past on other projects I've 
found changing that setting has 
fixed the issue.

I love this script, by the way. Thanks so very much.

Original comment by willh...@gmail.com on 9 Apr 2010 at 10:27

[GoogleCodeExporter]

Right, what you want to do is entirely possible. It's less elegant than it 
could be, but it'll work.

Place this code snippet below your html5media import:

<script>
    html5media.createFallback = function(tag, element) {
        var hasControls = hasAttr(element, "controls");
        // Standardize the src and poster.
        var poster = element.getAttribute("poster") || "";
        var src = element.getAttribute("src") || "";
        var format;
        if (!src) {
            // Find a compatible fallback file.
            each(element.getElementsByTagName("source"), function(source) {
                var srcValue = source.getAttribute("src");
                if (srcValue && !src) {
                    each(fallbackFormats, function(fallbackFormat) {
                        format = guessFormat(tag, srcValue, source.getAttribute("type"));
                        if (formatMatches(format, fallbackFormat)) {
                            src = srcValue;
                        }
                    });
                }
            });
        } else {
            format = guessFormat(tag, src);
        }
        // Create the replacement element div.
        var replacement = document.createElement("span");
        replacement.id = element.id;
        replacement.className = element.className;
        replacement.title = element.title;
        replacement.style.display = "block";
        replacement.style.width = getDimension(element, "width", "300px");
        replacement.style.height = getDimension(element, "height", "24px");
        // Replace the element with the div.
        element.parentNode.replaceChild(replacement, element);
        var preload = (element.getAttribute("preload") || "").toLowerCase();
        // Activate flowplayer.
        var flowplayerControls = null;
        var playlist = [];
        if (poster) {
            playlist.push({url: fixPath(poster)});
        }
        if (src) {
            playlist.push({
                url: fixPath(src),
                autoPlay: hasAttr(element, "autoplay"),
                autoBuffering: hasAttr(element, "autobuffer") || (hasAttr(element, "preload") && (preload == "" || 
preload == "auto")),
                onBeforeFinish: function() {
                    return !hasAttr(element, "loop");
                }
            });
        }
        // Determine which plugins should be loaded.
        var plugins = {
            controls: hasControls && {
                url: fixPath(html5media.flowplayerControlsSwf),
                fullscreen: false,
                autoHide: tag == VIDEO_TAG && "always" || "never"
            } || null
        }
        if (formatMatches(format, MP3_FORMAT)) {
            // Load the audio plugin.
            plugins["audio"] = {
                url: fixPath(html5media.flowplayerAudioSwf)
            }
            // HACK: The Flowplayer audio plugin requires that the controls plugin is present.
            if (!hasControls) {
                plugins["controls"] = {
                    url: fixPath(html5media.flowplayerControlsSwf),
                    display: "none"
                }
            }
            // HACK: The Flowplayer audio plugin will autoplay clips and never stop if autobuffering is enabled.
            playlist.slice(-1)[0].autoBuffering = false;
        }
        // Load the Flowplayer.
        flowplayer(replacement, {
            src: fixPath(html5media.flowplayerSwf),
            wmode: "opaque"
        }, {
            play: null,
            playlist: playlist,
            clip: {
                scaling: "fit",
                fadeInSpeed: 0,
                fadeOutSpeed: 0
            },
            plugins: plugins
        });
    }
</script>

This solution is basically all about creating a custom Flash fallback, as 
described here:

http://code.google.com/p/html5media/wiki/CustomFlashPlayers

The important bit is at the bottom of the function, where you change some of 
the FlowPlayer settings.

To be honest, this really does seem quite like overkill for you, but it should 
work. Any suggestions as to 
making the Flowplayer custom configuration more elegant would be appreciated!

Original comment by david.et...@gmail.com on 21 Apr 2010 at 11:22

• Changed title: Flowplayer wmode

[GoogleCodeExporter]

This was a question, not an issue, and an answer has been posted.

Original comment by david.et...@gmail.com on 7 May 2010 at 10:39

• Changed state: Done

[GoogleCodeExporter]

Just to let you now, the latest html5media build now has wmode opaque as 
standard:

http://github.com/etianen/html5media

Original comment by david.et...@gmail.com on 9 Jun 2010 at 4:01