Question

我有这个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转移它时不够强大。任何帮助，想法，提示或建议都非常感谢！

由于安德烈亚斯

Answer 1

我认为你的想法会奏效，但可能会非常棘手。

我将推荐而是创建一个“幕SWF”，而不是在其中加载类似 Chromeless YouTube播放器的内容。通过这种方式，您可以listen获取视频加载/缓冲时的效果，并在发生这种情况时显示窗帘。

使用jQuery在swf上创建swf

1 个答案: