HTML怎么点击按钮弹出视频
1、第一步：首先我们打开网页制作软件，进行编写简单的网页布局。先编写一个播放视频的按钮。
<div id="main" class="">
<input type="button" id="btn" onclick="open_video()" value="播放视频">
</div>
2、第二步：再编写一个div用来存放视频。
<div id="vido" class="">
<video width="600" height="400" controls>
<source src="" type="video/mp4">
</video>
</div>
3、第三步：给编写的div标签进行样式编写，以便在浏览中呈现出较好的预览效果。
<style type="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:0 auto;text-align:center;}
#vido{ width:602px; height:402px; border:1px dotted #00ff66; margin:0 auto;}
</style>
4、第四步：给两个div标签设置position位置。
<style type="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:0 auto;
text-align:center; position:relative;}
#vido{ width:602px; height:402px; border:1px dotted #00ff66;
margin:0 auto; position:absolute; top:100px; left:400px;}
</style>
5、第五步：在浏览器中进行浏览，看看布局是否合理。
6、第六步：实现点击“播放视频”按钮，弹出视频更功能。写上js脚本标签并设置打开网页时不显示视频。
<script>
window.onload=function non(){
document.getElementById("vido").style.cssText = "display:none;";
}
</script>
7、第七步：继续编写js，实现点击按钮弹出视频。自定义一个函数open_video().
function open_video(){
document.getElementById("vido").style.cssText = "display:block;";
}
8、第八步：所有代码都已编写完成，在浏览器中打开进行检验。点击按钮后就会弹出视频播放。（因为没有加入视频素材所以无画面）
9、总结：
1、首选打开网页软件进行简单的页面布局
2、编写相应的样式让视频先隐藏
3、编写js脚本，首先是当打开网页时没有视频display:none
4、编写点击按钮后，弹出视频，display:block;