<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body { text-align: center; } #container { display: inline-block; margin: 0 auto; position: relative; } video { border: 1px solid #aaa; background: #000; } #ad { position: absolute; top: 150px; left: 150px; } #ad img { width: 300px; height: 200px; opacity: 0.9; } #ad p { position: absolute; top: 0px; right: 10px; } </style> </head> <body> <div id="container"> <video id="video" width="600" height="500" controls poster="1.jpg"> <source src="birds.mp4"> </video> <div id="ad"> <a href="http://www.baidu.com"><img src="0.jpg"></a> <p id="close">关闭</p> </div> <div> <button onClick="restart()">restart</button> <button onClick="slow()"><<</button> <button onClick="play()" value="play" id="btn">play</button> <button onClick="fast()">>></button> <button onClick="change(this)" value="放大屏幕">放大屏幕</button> <button onClick="change(this)" value="初始大小">初始大小</button> <button onClick="change(this)" value="缩小屏幕">缩小屏幕</button> </div> </div> </body> </html> <script type="text/javascript"> var video = document.getElementById('video'); var videoWidth = video.width; var videoHeight = video.height; var ad = document.getElementById('ad'); var btn = document.getElementById('btn'); var close = document.getElementById('close'); video.onclick = function(){ play(); } function play(){ if(video.paused){ //获取当前是否是暂停状态 video.play(); btn.textContent='play'; }else{ video.pause(); btn.textContent='stop'; } } video.onpause = function(){ //当视频暂停时，广告显示 ad.style.display="inline-block"; } video.onplay = function(){ //当视频播放时，广告隐藏 ad.style.display="none"; } close.onclick = function(){ //点击按钮，关闭广告 ad.style.display='none'; } function change(btn){ if(btn.value=='放大屏幕'){ videoWidth*=1.1; videoHeight=1.1*videoHeight; }else if(btn.value=="初始大小"){ videoWidth=600; videoHeight=500; }else{ videoWidth*=0.9; videoHeight=0.9*videoHeight; } video.width=videoWidth; video.height=videoHeight; var www=document.defaultView.getComputedStyle(container,null).width;//获得宽度 var hhh=document.defaultView.getComputedStyle(container,null).height;//获得高度 www=parseFloat(www);//把字符串转换成数值 hhh=parseFloat(hhh);//把字符串转换成数值 ad.style.top=hhh/2-115+'px'; ad.style.left=www/2-150+'px'; } function restart(){ //重新播放 video.currentTime=0; } function fast(){ //快进方法，每次快进10秒 video.currentTime+=10; } function slow(){ //后退方法，每次后退10秒 video.currentTime-=10; } </script>