运用fancybox弹出div的方式弹出视频界面

fancybox可以弹出很多窗体,甚至一个swf格式的小视频。但这样的swf视频播放的时候并没有任何的控件。只能重头看到尾,或者关闭。我们可以利用fancybox弹出div盒子的方式配合html5很快的写出弹出一个小视频的代码。首先,效果如下图所示。点击播放的图片,弹出播放视频。背景自动虚化。

运用fancybox弹出div的方式弹出视频界面

首先引入fancybox文件,可以再fancy官网下载,注意图片文件也要放进网页目录。

  <link rel="stylesheet" type="text/css" href="css/fancybox.css" />
  <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
  <script type="text/javascript" src="js/jquery.fancybox-1.3.1.pack.js"></script>
  <script type="text/javascript" src="js/main.js"></script>

然后是html部分

<a id="showdiv1" href="#box1" title="测试"><img src="images/play.PNG" /></a><!--存放播放的图标,可以是img,button等等--!>
                    <div  style="display:none"><!--先让div隐藏--!>
                        <div id="box1">
                            <video id="movie" src="movie/1.MP4" controls="controls" preload="meta"></video>
                        </div>
                    </div>

最后是js部分

$(document).ready(function(){
    $("#showdiv1").fancybox({
        padding:0,
        hideOnOverlayClick:false,
        fitToView:false,
        autoSize:true,
        closeClick:true,
        openEffect:"none",
        closeEffect:"none",
        "onClosed":function(){window.document.location.reload(true)},
        centerOnScroll:true
    })
});

最后可以自己稍作改动,做到自己想要的效果

微信公众号:rizhuti
关注我们,获取更多的全网素材资源,有趣有料!
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏