admin管理员组

文章数量:1427149

I have a client who is embedding videos into his WordPress blog. The problem is they have a large CSS dropdown that sneaks behind the flash video. I understand that setting the video's wmode to opaque will fix this, but I obviously need this to apply to every video they upload and not have to go to the HTML to add this tag

Is there any way I can do this programatically?

I have a client who is embedding videos into his WordPress blog. The problem is they have a large CSS dropdown that sneaks behind the flash video. I understand that setting the video's wmode to opaque will fix this, but I obviously need this to apply to every video they upload and not have to go to the HTML to add this tag

Is there any way I can do this programatically?

  • javascript
  • flash
  • video
Share Improve this question edited Jul 22, 2009 at 22:19 Grant Wagner 25.9k7 gold badges56 silver badges65 bronze badges asked Jul 22, 2009 at 21:49 patricksweeneypatricksweeney 4,0327 gold badges44 silver badges56 bronze badges
Add a ment  | 

6 Answers 6

Reset to default 3

To avoid confusion with all the edits I've done to my previous answer, I'm creating a new answer with a fully tested and working sample page. It has been tested and is working in IE 6, 7 & 8, Opera 9.6 & 10, Safari 3 & 4, Google Chrome, but no version of Firefox I tested (2, 3 or 3.5):

<html>
<head><title>Opacity text</title></head>
<body>
<div style="color:Red;position:absolute;top:0px;left:0px;">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
</div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="200" width="300">
    <param name="movie" value="http://freevideocoding./flvplayer.swf?file=http://www.freevideoediting./TVQvideos/Queen Demo--flv.flv&autoStart=false">
    <param name="bgcolor" value="#ffff00">
</object>
<!--
all you need to make this work is the script listed below.
everything else is just sample code to provide a demonstration
that the script shown below actually works
-->
<script type="text/javascript">
function makeObjectsOpaque_TestedAndWorking() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for (var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}
window.onload = makeObjectsOpaque_TestedAndWorking;
</script>
</body>
</html>

I think the problem is that you need to create a wmode="opaque" attribute inside of the embed tag AS WELL AS add a param element with wmode set to "opaque." While Grant Wagner's code is effective at adding the wmode="opaque" as a param inside the object, it does not add it as an attribute in the embed tag. You need them both if you want this to work cross-browser, cross-platform. That might be why Grant Wagner is seeing it work, while patricksweeney is not.

Josh Fraser wrote a nice function that rewrites the embed tag to include the wmode attribute. soooooo I bined Grant Wagner's solution for adding the wmode param, and Josh Fraser's solution for adding a wmode attribute to the embed in one function, and it looks a little something like this:

 function fix_flash() {
    // loop through every embed tag on the site
    var embeds = document.getElementsByTagName('embed');
    for(i=0; i<embeds.length; i++)  {
        embed = embeds[i];
        var new_embed;
        // everything but Firefox & Konqueror
        if(embed.outerHTML) {
            var html = embed.outerHTML;
            // replace an existing wmode parameter
            if(html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i))
                new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i,"wmode='opaque'");
            // add a new wmode parameter
            else 
                new_embed = html.replace(/<embed\s/i,"<embed wmode='opaque' ");
            // replace the old embed object with the fixed version
            embed.insertAdjacentHTML('beforeBegin',new_embed);
            embed.parentNode.removeChild(embed);
        } else {
            // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF
            new_embed = embed.cloneNode(true);
            if(!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase()=='window')
                new_embed.setAttribute('wmode','opaque');
            embed.parentNode.replaceChild(new_embed,embed);
        }
    }
    // loop through every object tag on the site
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for (var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}
window.onload = fix_flash;

It's a little bit of code, but it works very well, and it saved me from hours of pulling out my hair.

Since you seem to have abandoned this question I'll paste the answer here:

// makeObjectsOpaque() adds a <param> tag to each <object> tag
// analogous to <object ...><param name="wmode" value="opaque"></object>
// it seems unlikely that adding a <param> to an <object> dynamically after
// it has been rendered by the browser will actually apply the <param> value
// correctly; in other words, it *probably* WILL NOT WORK
function makeObjectsOpaque() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        elementToAppend = elementToAppend.cloneNode(true);
        objects[i].appendChild(elementToAppend);
    }
}

// makeObjectsOpaque2() adds a 'wmode' attribute to each <object> tag
// this should be analogous to <object ... wmode="opaque"> in HTML
// THIS DOES NOT APPEAR TO BE WHAT YOU WANT TO DO ACCORDING TO
// THIS URL: http://kb2.adobe./cps/127/tn_12701.html
function makeObjectsOpaque2() {
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        objects[i].setAttribute('wmode', 'opaque');
        // you can also try:
        // objects[i].wmode = 'opaque';
    }
}

// makeObjectsOpaque3() replaces every <object> tag on the page with
// a cloned copy, adding a <param> tag before replacing it
// analogous to replacing <object ...>...</object>
// with <object ...>...<param name="wmode" value="opaque"></object>
// this *may* cause the browser to re-render the <object> and apply
// the newly added <param>, or it may not
function makeObjectsOpaque3() {
    var elementToAppend = document.createElement('param');
    elementToAppend.setAttribute('name', 'wmode');
    elementToAppend.setAttribute('value', 'opaque');
    var objects = document.getElementsByTagName('object');
    for(var i = 0; i < objects.length; i++) {
        var newObject = objects[i].cloneNode(true);
        elementToAppend = elementToAppend.cloneNode(true);
        newObject.appendChild(elementToAppend);
        objects[i].parentNode.replaceChild(newObject, objects[i]);
    }
}

window.onload = makeObjectsOpaque3;

If there is already an onload event handler you'll have to do something like:

if(window.onload) {
    var onLoad = window.onload;
    window.onload = function() {
        onLoad();
        makeObjectsOpaque3();
    };
} else {
    window.onload = makeObjectsOpaque3;
}

Using jQuery, you could try this:

$(document).ready(function(){
    $("object").append('<param name="wmode" value="opaque">');
});

Not entirely sure if that would work, but it's worth a shot. Good luck!

How about this. It sets it on the object and as a param (if the param already exists, it updates it; otherwise, it adds it).

var setWmode = function(wmode, object) {
    $(object || "object").each(function(i, node) {
        // Set wmode on the object
        node.setAttribute("wmode", wmode);

        // See if wmode already exists to avoid duplication param conflicts
        var currentWmode = $("param[name='wmode']", node);

        // If it already exists, make sure its the new wmode
        if ( currentWmode.length ) {
            currentWmode.attr("value", wmode);
        }
        // Otherwise, add it
        else {
            $(node).append('<param name="wmode" value="' + wmode + '">');
        }
    });
};

$(document).ready(function() {
    setWmode("opaque");
});

For the record, it needs to be changed in TWO places: see here.

本文标签： javascriptHow do I programmatically set all ltobjectgt39s to have the wmode set to opaqueStack Overflow

版权声明：本文标题：javascript - How do I programmatically set all &lt;object&gt;&#39;s to have the wmode set to opaque? - Stack Overflo 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745488287a2660484.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。