在网页设计中少不了播放视频的功能，那么怎么自己制作HTML点击按钮时弹出视频呢？下面就随我一起进行实际操作吧。
工具/原料
操作系统：win10专业版
Editplus5
演示浏览器：360浏览器
方法/步骤
1、第一步：首先我们打开网页制作软件，进行编写简单的网页布局。先编写一个播放视频的按钮。<divid="main"class=""> <inputtype="button"id="btn"onclick="open_video()"value="播放视频"></div>
2、第二步：再编写一个div用来存放视频。<divid="vido"挢旗扦渌;class="&鳎溻趄酃quot;><videowidth="600"height="400"controls><sourcesrc=""type="video/mp4"></video></div>
3、第三步：给编写的div标签进行样式编写，以便在浏览中呈现出较好的预览效果。<styl娣定撰钠etype=&q锇栀劐箨uot;text/css"> #btn{width:100px;height:40px;font-size:20px;border-radius:10px;background:#ff0066;margin-top:550px;} #main{width:800px;height:600px;background:#cc00cc;margin:0auto;text-align:center;} #vido{width:602px;height:402px;border:1pxdotted#00ff66;margin:0auto;}</style>
4、第四步：给两个div标签设置position位置。<styletype="挢旗扦渌;text/css"媪青怍牙> #btn{width:100px;height:40px;font-size:20px;border-radius:10px;background:#ff0066;margin-top:550px;} #main{width:800px;height:600px;background:#cc00cc;margin:0auto; text-align:center;position:relative;} #vido{width:602px;height:402px;border:1pxdotted#00ff66; margin:0auto;position:absolute;top:100px;left:400px;}</style>
5、第五步：在浏览器中进行浏览，看看布局是否合理。
6、第六步：实现点击“播放视频”按钮，弹出视频更功能。写上js脚本标签并设置打开网页时不显示视频。<script> window.onload=functionnon(){ document.getElementById("vido").style.cssText="display:none;"; }</script>
7、第七步：继续编写js，实现点击按钮弹出视频。自定义一个函数open_video().functionopen_video(){ document.getElementById("vido").style.cssText="display:block;"; }
8、第八步：所有代码都已编写完成，在浏览器中打开进行检验。点击按钮后就会弹出视频播放。（因为没有加入视频素材所以无画面）
9、总结：首选打开网页软件进行简单的页面布局编写相应的样式让视频先隐藏编写js脚本，首先是当打开网页时没有视频display:none编写点击按钮后，弹出视频，display:block;