HTML5(video)

最新推荐文章于 2024-11-13 09:44:44 发布

原创最新推荐文章于 2024-11-13 09:44:44 发布 · 263 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <style>
           .div {
               width: 500px;
               height: 500px;
           }

           .div2 {
               width: 500px;
               height: 500px;
               position: absolute;
               top: 200px;
               left: 510px;
           }

           .void {
               width: 500px;
               height: 500px;
           }

           body {
               margin-left: 300px;
           }
       </style>

   </head>

   <body>



       <div class="di">
           <video class="void" src="video/video2.MP4" id="vid" onclick="playPause()" onmousemove="start()" onmouseout="stop()"></video>
       </div>

       <div class="div2" id="di">
           <img src="img/a14.png" onclick="playPause()" />
       </div>

   </body>

   <script>
       var vv = document.getElementById("vid");
       var im = document.getElementById("im");
       var di = document.getElementById("di");

       function playPause() {
           if(vv.paused) {
               di.style.visibility = "hidden"
               vv.play();
           } else {
               di.style.visibility = "visible"
               vv.pause();
           }

       }

       function start() {
           if(vv.paused) {
               di.style.visibility = "visible"

           } else {
               di.style.visibility = "hidden"
           }
       }

       function stop() {
           setTimeout("aa()", 3000)

       }

       function aa() {

           di.style.visibility = "hidden"

       }
   </script>

</html>