html中怎么点击图片弹出视频

发布网友 发布时间：2022-04-22 22:59

我来回答

共5个回答

懂视网 时间：2022-04-21 16:49

fancybox可以弹出很多窗体，甚至一个swf格式的小视频。但这样的swf视频播放的时候并没有任何的控件。只能重头看到尾，或者关闭。我们可以利用fancybox弹出div盒子的方式配合html5很快的写出弹出一个小视频的代码：

首先引入fancybox文件

最后是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 })});

热心网友 时间：2022-04-21 13:57

头标签代码如下：

<link href="css/layerModel.css" type="text/css" rel="stylesheet">
 <script type="text/javascript" src="js/jquery.layerModel.js"></script><script type="text/javascript">$(function(){ $("#demoBtn1").click(function(){      $('#demo1').layerModel({ blurClose : true });    });
}）;

body代码如下：

<a href="#" id="demoBtn1"  class="run">          <img    src="img/three-video2.png">              <span class="over-text"  style="float:left;width:90%;">案例视频影视官网2.0</span>     </a>
<!--弹出视频的代码-->            <div id="demo1" class="gpc-t-box">              <div class="gpc-video-t">                <embed allowscriptaccess="always" allownetworking="all" allowfullscreen="true" width="670" height="377" type="application/x-shockwave-flash" src="http://cloud.video.taobao.com/play/u/2182797685/p/1/e/1/t/7/38483233.swf">                </embed>              </div>              <div class="gpc-video-t1">                 <div class="gpc-video-t1-lf">                   <h2 class="gpc-video-t1-lf-1">案例视频影视官网</h2><span class="gpc-video-t1-lf-2"><img src="img/read.png" />17502</span>                 </div>                 <div class="gpc-video-t1-rt">                   <span>￥15,000</span>起                 </div>                           </div>              <div class="gpc-video-t2">                 <div class="gpc-video-t2-lf">                   <p class="gpc-a1-8"><a href="#">来来</a> <a href="#">发布于</a> <a href="#">2016-06-09</a><a href="#">时长：00:20:00</a></p>                 </div>                 <div class="gpc-video-t2-rt">                   <a class="gpc-a1-9" href="detail.php">查看更多详情>></a>                 </div>                            </div>            </div>            <!--/end-->

热心网友 时间：2022-04-21 15:15

先把视频隐藏当点击时再显示这不难吧追问怎么插入视频？

热心网友 时间：2022-04-21 16:50

<script type="text/javascript">
window.onload=function(){
var tit=document.getElementById('question1');
var con=document.getElementById('answer1');
tit.onclick=function(){
if(con.style.display=='block'){
con.style.display='none';
}
else{
con.style.display='block';
}
}
};
</script>
点击出现/消失
<EMBED src=a.rm width=320 height=320 type=audio/x-pn-realaudio-plugin console="Clip1" controls="IMAGEWINDOW,ControlPanel,StatusBar" autostart="true"></EMBED>
插入视频

热心网友 时间：2022-04-21 18:41

使用jQuery插件FancyBox轻松实现！http://fancybox.net/追问怎么插入视频？本地的视频

追答

我还是直接写个例子打包给你吧！