Question

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

Answer 1

头标签代码如下：

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

Answer 2

需要JS控制，点击图片生成一个弹窗，同时让其自动播放，点击弹窗上的关闭按钮或者点击弹窗以外的地方销毁弹窗。

Answer 3

使用html5的video标签，标签先隐藏，给图片增加onclick事件，弹出视频。

• 超文本标记语言， 标准通用标记语言下的一个应用。“ 超文本 ”就是指页面内可以包含图片、 链接，甚至音乐、 程序等非文字元素。

• 一个网页对应多个 HTML文件， 超文本标记语言文件以.htm为 扩展名或.html为 扩展名。可以使用任何能够生成 TXT类型 源文件的文本编辑器来产生超文本标记语言文件，只用修改文件 后缀即可。

• 万维网上的一个 超媒体文档称之为一个 页面。作为一个组织或者个人在 万维网上放置开始点的 页面称为 主页或首页，主页中通常包括有指向其他相关页面或其他节点的指针。

• 这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面的有机集合称为 网站。超级文本标记语言是为“ 网页创建和其它可在 网页浏览器中看到的信息”设计的一种 标记语言。

• 网页的本质就是超级文本标记语言，通过结合使用其他的 Web技术，可以创造出功能强大的网页。因而，超级文本标记语言是万维网编程的基础，也就是说 万维网是建立在超文本基础之上的。