当前位置： 文江博客话题详情

使用 jQuery 在 swf 上创建 swf

发布于 2024-11-29 07:28:11 字数 4605 浏览 0 评论 0原文

我有这个 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>

但是我在 javascript 方面不够强大来传输它。 非常感谢任何帮助、想法、提示或建议！

谢谢 安德烈亚斯

原文

I have this javascript file which is a modified version of the VideoLightBox script:

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

    }
}); });

The script opens a flash swf file in a "popup" lightbox fashion and plays it either from youtube or via a player locally. I was however wondering if it was possible to create a secondary swf to float on top of the player (noting that this of course would have the wmode:"transparent") and hereby create an opening curtain effect revealing the first swf and the player. I've been trying for quite some time now to load the top clip via createSWF and to create an additional div to contain it and float it using absolute position however I can't seem to get it right.. I know that the div float perfectly on top of each other when using:

<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>

However I'm not strong enough in javascripting to transfer it.
Any help, ideas, hints or suggestions are much appreciated!

Thanks
Andreas

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

剪不断理还乱 2024-12-06 07:28:11

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

我建议是创建一个“curtain swf”，在其中加载类似Chromeless YouTube 播放器的内容。这样您就可以监听视频何时完成加载/缓冲，并在发生这种情况时显示窗帘。

I think your idea will work, but could get quite tricky.

What I would recommend instead is creating a "curtain swf" that instead loads something like the Chromeless YouTube player inside of it. This way you can listen for when the video is done loading/buffering and reveal the curtains when that happens.

回复 原文
~没有更多了~

关于作者

暗藏城府

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文