html里如何点击图片d出视频播放

1、首先在电脑上启动DW网页编辑器，新建一个html网页。

2、然后在body中插入一个div【<div></div>】,并在head中引入CSS【<style type="text/css"></style>】。

3、然后给DIV定义一个CSS，设置宽高属性等，并写一段文字。

4、接着在样式中，加入禁止选择文字的样式。

5、最后保存网页并刷新后，再用鼠标选择文字就没办法选择了。

头标签代码如下：

<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:leftwidth:90%">案例视频影视官网2.0</span>     </a>

<!--d出视频的代码-->            <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-->

工具／原料：

联想小新潮7000-13

Win 10

Visual Studio Code1.47.2

1、进入Visual Studio Code，新建html文件

打开Visual Studio Code软件，打开工作区空间，选择需要进行 *** 作的文件夹，点击上方的新建文件选项。

2、给html文件命名为video.html

在d出的文本框中给html文件命名，文件命名为video.html。

3、输入添加视频文件的代码

在新建的．html文件中输入添加视频文件的html代码：

<video src="../media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>。

4、使用工具查看代码效果

在代码的空白区域右击—＞在d出的选项卡中选择Open In Default Browser选项。

5、显示视频文件

点击运行之后，在浏览器网页中显示添加的视频文件，点击播放按钮，正常播放视频。

---