WebCat - 播放视频 - 常规

这是一个简单的 WebCat 视频播放器，用户可以点击“播放视频”按钮来播放视频。

该播放器使用 JavaScript 代码来控制音频和图片的播放。音频文件为 'mp3/gu.mp3'，图片文件为 'img1/1.jpg' 到 'img1/1525.jpg'。

当用户点击“播放视频”按钮时，JavaScript 代码会执行以下操作：

如果音频正在播放，则暂停播放。
如果音频未播放，则开始播放音频并开始显示图片。
使用 setInterval 函数以 25 毫秒的间隔切换图片，直到播放完所有图片。

该代码使用了以下 JavaScript 对象和函数：

Audio 对象：用于播放音频文件。
setInterval 函数：用于以固定间隔执行函数。
clearInterval 函数：用于停止定时器。

该播放器可以用来播放简单的视频，例如动画或幻灯片。

代码分析

let isPlaying = false;
const audio = new Audio('mp3/gu.mp3');

inp.onclick = function() {
  if (!isPlaying) {
    isPlaying = true;
    audio.currentTime = 0; // 将音频播放时间设置为0，以便重新播放
    audio.play();
    wdsj(1525);
  }
}

function wdsj(hbg) {
  let gg = hbg + 1;
  let ii = 1;
  let count = 0;
  let timer = setInterval(function() {
    if (ii < gg) {
      bofang(ii);
      ii++;
      count++;
      if (count >= gg) {
        clearInterval(timer);
        isPlaying = false; // 播放完毕后重置为false
      }
    }
  }, 25);
}

function bofang(fps) {
  img.src = 'img1/' + fps + '.jpg';
  console.log(fps);
}

代码说明

isPlaying 变量：用于记录音频是否正在播放。
audio 对象：用于播放音频文件。
inp.onclick 函数：当用户点击“播放视频”按钮时执行的函数。
wdsj 函数：用于切换图片并控制播放状态。
bofang 函数：用于切换图片。

修改后的代码

<!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, #nop {
       text-align: center;
       font-size: 10vw;
       }
    </style>
  </head>
  <body>	
	<img src='img1/1.jpg' id='img'/>
    <div id='inp'>播放视频</div>
 <script>
 let isPlaying = false;
 const audio = new Audio('mp3/gu.mp3');

inp.onclick = function() {
  if (!isPlaying) {
    isPlaying = true;
    audio.currentTime = 0; // 将音频播放时间设置为0，以便重新播放
    audio.play();
    wdsj(1525);
  }
}

function wdsj(hbg) {
  let gg = hbg + 1;
  let ii = 1;
  let count = 0;
  let timer = setInterval(function() {
    if (ii < gg) {
      bofang(ii);
      ii++;
      count++;
      if (count >= gg) {
        clearInterval(timer);
        isPlaying = false; // 播放完毕后重置为false
      }
    }
  }, 25);
}

function bofang(fps) {
  img.src = 'img1/' + fps + '.jpg';
  console.log(fps);
}
 </script>
  </body>
</html>

使用说明

将以上代码保存为 HTML 文件，例如 index.html。
将 img1 文件夹和 mp3 文件夹放在与 HTML 文件相同的目录下。
在浏览器中打开 HTML 文件。
点击“播放视频”按钮即可播放视频。