使用 jQuery 在 swf 上创建 swf答案

【问题标题】：Creating an swf on an swf with jQuery使用 jQuery 在 swf 上创建 swf
【发布时间】：2011-10-26 09:56:28
【问题描述】：

我有这个 javascript 文件，它是 VideoLightBox 脚本的修改版本：

jQuery(function(){
var $=jQuery;
var swfID = "video_overlay";

if(!document.getElementById("vcontainer")){
    $("body").append($("<div id='voverlay'></div>"));
    $("#voverlay").append($("<div id = 'vcontainer'></div>"));
}

$("#videogallery a[rel]").overlay({
    api:true,

    expose: (0?{
        color:'#424542',
        loadSpeed:400,
        opacity:0
    }:null),

    effect:"apple",

    onClose: function(){
        swfobject.removeSWF(swfID);
    },


    // create video object for overlay
    onBeforeLoad: function(){
        // check and create overlay contaner
        var c = document.getElementById(swfID);
        if(!c){
            var d = $("<div></div>");
            d.attr({id: swfID});
            $("#vcontainer").append(d);
        };

        var wmkText="© 2011 BORKH";
        var wmkLink="http://borkh.co.uk";
        c = wmkText? $('<div></div>'):0;
        if (c) {
            c.css({
                position:'absolute',
                right:'38px',
                top:'38px',
                padding:'0 0 0 0'
            });
            $("#vcontainer").append(c);
        };

        // for IE use iframe
        if (c && document.all){
            var f = $('<iframe src="javascript:false"></iframe>');
            f.css({
                position:'absolute',
                left:0,
                top:0,
                width:'100%',
                height:'100%',
                filter:'alpha(opacity=0)'
            });

            f.attr({
                scrolling:"no",
                framespacing:0,
                border:0,
                frameBorder:"no"
            });

            c.append(f);
        };

        var d = c? $(document.createElement("A")):c;
        if(d){
            d.css({
                position:'relative',
                display:'block',
                'background-color':'',
                color:'#626d73',
                'font-family': 'RegisterSansBTNDmRegular, Helvetica, Arial',
                'font-size':'11px',
                'font-weight':'normal',
                'font-style':'normal',
                'text-decoration': 'none',
                padding:'1px 5px',
                opacity:.7,
                filter:'alpha(opacity=70)',
                width:'auto',
                height:'auto',
                margin:'0 0 0 0',
                outline:'none'

            });
            d.attr({href:wmkLink});
            d.html(wmkText);
            d.bind('contextmenu', function(eventObject){
                return false;
            });

            c.append(d);
        }

        // create SWF
        var src = this.getTrigger().attr("href");

        if (typeof(d)!='number' && (!c || !c.html || !c.html())) return;

        if (false){
            var this_overlay = this;
            // if local
            window.videolb_complite_event = function (){ this_overlay.close() };
            // if youtoube
            window.onYouTubePlayerReady = function (playerId){
                var player = $('#'+swfID).get(0);
                if (player.addEventListener) player.addEventListener("onStateChange", "videolb_YTStateChange");
                else player.attachEvent("onStateChange", "videolb_YTStateChange");
                window.videolb_YTStateChange = function(newState){
                    if (!newState) this_overlay.close()
                }
            }
        }

        swfobject.createSWF(
            { data:src, width:"100%", height:"100%", wmode:"opaque" },
            { allowScriptAccess: "always", allowFullScreen: true, FlashVars: (false?"complete_event=videolb_complite_event()&enablejsapi=1":"") },
            swfID
        );

    }
}); });

脚本以“弹出式”灯箱方式打开一个 Flash swf 文件，并从 youtube 或通过本地播放器播放。然而，我想知道是否可以创建一个辅助 swf 以浮动在播放器顶部（注意这当然会有wmode:"transparent"），从而创建一个打开的窗帘效果，显示第一个 swf 和播放器。我一直在尝试通过createSWF 加载顶部剪辑并创建一个额外的 div 来包含它并使用绝对位置浮动它但是我似乎无法做到正确.. 我知道使用时 div 完美地漂浮在彼此之上：

<head>
<style type="text/css" media="screen">
<!--
#bottom{
    position:absolute;
    width: 500px;
    height: 400px;
}
#top{
    position:absolute;
    width:500px;
    height:400px;
    top: 0px;
    left: 0px;
} 
-->
</style>
</head>
<body>
<div id="bottom">
"MAIN CLIP"
  <div id="top">
    "CURTAIN EFFECT"
  </div>
</div>

但是我在 javascripting 方面的能力还不够强，无法转移它。非常感谢任何帮助、想法、提示或建议！

谢谢安德烈亚斯

【问题讨论】：

标签： javascript jquery flash layout css-position

【解决方案1】：

我认为你的想法可行，但可能会变得相当棘手。

我会推荐创建一个“窗帘 swf”，它会在其中加载类似于 Chromeless YouTube 播放器 之类的东西。这样您就可以listen 了解视频何时完成加载/缓冲，并在发生这种情况时显示幕布。

【讨论】：