Question

我是所有这一切的新手，我肯定会努力变得更好！我试图添加到这个灯箱的视频是我的新商业广告：（http://www.gatorgraphix.com/uploads/5/1/7/6/5176322/gator_graphix_commercial.mp4）但我很难将它放入我的灯箱并自动播放。你能帮我吗？？这是我的剧本：

<htmL>
    <head>
        <title>Gator Graphix™ Commercial</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <style type="text/css">

        body
        {
             font-family: Helvetica, Arial;
        }

        .backdrop
    {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }


        .box
        {
            position:absolute;
            top:20%;
            left:30%;
            width:640px;
            height:310px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;

        }

        .close
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }

        </style>

        <script type="text/javascript">

            $(document).ready(function(){

                $('.lightbox').click(function(){
                     $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                     $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                     $('.backdrop, .box').css('display', 'block');

                });

                $('.close').click(function(){
                    close_box();

                });

                $('.backdrop').click(function(){
                    close_box();

                });

            });


            function close_box()
            {
                $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                        $('.backdrop, .box').css('display', 'none');
                    });
            }

        </script>

    <Head>
    <body>

    <h1>Gator Graphix™ Commercial</h1>
    <a href="#" class="lightbox">Click To View Our New Commercial</a>

    <div class="backdrop"></div>
    <div class="box"><div class="close">x</div>Gator Graphix™ Commercial</div>

    </body>
</html>

Answer 1

您可以使用http://iaian7.com/webcode/mediaboxAdvanced

Answer 2

在玩了几个灯箱脚本后，我发现shadowbox - （http://www.shadowbox-js.com/download.html）非常完美......

在此处链接的下载页面上，您可以选择所有播放器类型，这样您就可以嵌入Flash，视频，图片等。

如何将视频添加到灯箱？

2 个答案: