图片名称 sprite.zip
<!doctype html> <html> <head> </head> <style> .css{ position: absolute; top: 0; left: 0; height: 100%; 100%; z-index: -10; background-position: center 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; zoom: 1; background-image: url("117.jpg"); } #video1{ display:none; } #play{ 60px; height: 61px; background:url(sprite.png) no-repeat; background-position: -60px 0px; border:none; } #vid{ 60px; height: 61px; background:url(sprite.png) no-repeat; background-position: 0 0; border:none; } .hide{ display:none; } </style> <body> <div class="css"> </div> <audio src="1.mp3" controls="controls" id="video1"> 不支持 </audio> <button type="button" id="play" onclick="playVid()"></button> <button class="hide" type="button" id="vid" onclick="pauseVid()"></button> </body> <script> var myVideo=document.getElementById("video1"); var Oplay = document.getElementById('play'); var Ovid = document.getElementById('vid'); Oplay.onclick=function(){ this.style.display='none'; Ovid.style.display='block'; myVideo.play(); } Ovid.onclick=function(){ this.style.display='none'; Oplay.style.display='block'; myVideo.pause(); } /** function playVid() { myVideo.play(); } function pauseVid() { myVideo.pause(); } */ </script> </html>