网页视频播放器 - WebCat - 常规

<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>WebCat</title>
    <style>
      * {
       margin: 0;
        padding: 0;
       }
      img {
        width: 100vw;
       }
     #inp, #oop {
       text-align: center;
       font-size: 10vw;
       }
    </style>
    <script src="js/jquery.min.js"></script>
  </head>
  <body>	
	<img src="img/1.jpg" id="img" />
    <div id="inp">播放视频</div>
    <div id="oop"></div>
 <script>
 let isPlaying = false;
 let tyt;
 let kpo;
 let autoi = 0;
 const audio = new Audio('mp3/0.mp3');
function bofang(fps) {
  img.src = "img/" + fps + ".jpg";
  $("#inp").text(fps);
  console.log(fps);
}
inp.onclick = function() {
  $("#oop").text("暂停播放");
  autoi = 1;
  let tyt = 1;
  audio.play();
  setInterval(function() {
    if (!isPlaying) {
      if (tyt < 1196 && tyt > 0) {
        if (autoi === 1) {
          bofang(tyt);
          tyt++;
        } else {
          kpo = tyt;
          tyt = -1;
          audio.pause();
        }
      } else {
        if (autoi === 1) {
          tyt = 1;
          audio.currentTime = 0;
          audio.play();
        } else {
          tyt = -1;
          audio.pause();
        }
      }
    }
  }, 10);
  isPlaying = true;
};
<p>/*
function jixvbf(tyt) {
autoi = 1;
audio.play();
setInterval(function() {
if (tyt &lt; 1196 &amp;&amp; tyt &gt; 0) {
if (autoi === 1) {
bofang(tyt);
tyt++;
} else {
kpo = tyt;
tyt = -1;
audio.pause();
}
} else {
if (autoi === 1) {
tyt = 1;
audio.currentTime = 0;
audio.play();
} else {
kpo = tyt;
tyt = -1;
audio.pause();
}
}
}, 10);
}
*/</p>
<p>oop.onclick = function() {
if (autoi === 1) {
autoi = 0;
isPlaying = false;
$(&quot;#oop&quot;).text(&quot;继续播放&quot;);
} else {
alert(kpo);
autoi = 1;
$(&quot;#oop&quot;).text(&quot;暂停播放&quot;);
}
};
</script></p>
  </body>
</html>