Question

我有一位客户将视频嵌入到他的WordPress博客中。问题是他们有一个很大的CSS下拉，隐藏在Flash视频背后。我知道将视频的wmode设置为opaque会解决此问题，但我显然需要将其应用于他们上传的每个视频，而不必转到HTML来添加此标记

我有什么方法可以以编程方式执行此操作吗？

Answer 1

为了避免与我之前的答案所做的所有编辑混淆，我正在使用经过全面测试和运行的样本页面创建一个新的答案。它已经过测试，正在IE 6,7＆amp; 8，Opera 9.6＆amp; 10，Safari 3＆amp; 4，谷歌浏览器，但没有我测试过的Firefox版本（2,3或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.com/flvplayer.swf?file=http://www.freevideoediting.com/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>

Answer 2

我认为问题是你需要在embed标签内部创建一个wmode =“opaque”属性AS WELL AS添加一个wram设置为“opaque”的param元素。虽然Grant Wagner的代码在将wmode =“opaque”作为参数添加到对象中是有效的，但它不会将其作为embed标记中的属性添加。如果您希望跨浏览器跨平台工作，则需要它们。这可能就是为什么Grant Wagner看到它有效，而patricksweeney却没有。

Josh Fraser编写了一个很好的函数，它重写了embed标记以包含wmode属性。 soooooo我结合了Grant Wagner的添加wmode param的解决方案，以及Josh Fraser在一个函数中为嵌入添加wmode属性的解决方案，它看起来像这样：

 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;

这是一些代码，但它运作得非常好，它让我免于数小时拔出头发。

Answer 3

由于您似乎放弃了this question，我会在此处粘贴答案：

// 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.com/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;

如果已有onload事件处理程序，则必须执行以下操作：

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

Answer 4

使用jQuery，你可以试试这个：

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

不完全确定这是否有用，但值得一试。祝你好运！

Answer 5

这个怎么样？它将它设置在对象上并作为参数（如果param已存在，则更新它;否则，它会添加它）。

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");
});

Answer 6

为了记录，需要在两个地方进行更改：请参阅here。

如何以编程方式设置所有<object>以将wmode设置为opaque？</object>

6 个答案: