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;
      }
<pre><code>  img {
    width: 100vw;
  }

  #inp,
  #oop {
    text-align: center;
    font-size: 10vw;
  }
&lt;/style&gt;
&lt;script src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
  </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');
<pre><code>  function bofang(fps) {
    img.src = 'img/' + fps + '.jpg';
    $('#inp').text(fps);
  }

  inp.onclick = function () {
    $('#oop').text('暂停播放');
    autoi = 1;
    let tyt = 1;
    audio.play();
    setInterval(function () {
      if (!isPlaying) {
        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 {
            tyt = -1;
            audio.pause();
          }
        }
      }
    }, 10);
    isPlaying = true;
  };

  oop.onclick = function () {
    if (autoi == 1) {
      autoi = 0;
      isPlaying = false;
      audio.pause();
      kpo = audio.currentTime;
      $('#oop').text('继续播放');
    } else {
      autoi = 1;
      audio.currentTime = kpo;
      audio.play();
      $('#oop').text('暂停播放');
    }
  };
&lt;/script&gt;
</code></pre>
  </body>
</html>