自定义按钮:定位+video+javascript

最新推荐文章于 2023-11-30 16:02:49 发布

深渊咆哮

最新推荐文章于 2023-11-30 16:02:49 发布

阅读量2.4k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/SJ_LPL_SB/article/details/78685958

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

   <head>
       <meta charset="UTF-8">
       <title>视频播放器</title>
       <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>

       <style>
           #im {
               width: 30px;
               height: 20px;
               position: relative;
               left: 70px;
               top: 100px;
           }

           #sy {
               width: 30px;
               height: 20px;
               position: relative;
               left: 100px;
               bottom: -70px;
           }

           #bb {
               position: relative;
               left: 140px;
               top: 140px;
           }
       </style>
   </head>

   <body>

       <video src="../../video/video2.MP4" id="bb"></video>
       <img id="sy" src="../../img/Nomus.png" οnclick="mute()" />
       <img id="im" src="../img/play.png" οnclick="start1()" />
       <script>
           var bb = document.getElementById("bb")
           var ii = document.getElementById("im");
           var sy = document.getElementById("sy");

           function start1() {

               var f = bb.paused;

               if(f) {
                   bb.play()
                   ii.setAttribute("src", "../../img/play.png");
               } else {
                   var ff = document.getElementById("im")
                   bb.pause()
                   ii.setAttribute("src", "../../img/pause.png");

               }

           }

           function mute() {
               var g = bb.muted;

               if(g) {
                   console.log("禁用声音");
                   bb.muted = false;
                   sy.setAttribute("src", "../../img/Nomus.png");
               } else {

                   //                   console.log("启用声音");
                   bb.muted = true;
                   sy.setAttribute("src", "../../img/mus.png");
               }
           }
           start1();
           mute();
       </script>
   </body>

</html>