如何让WebCat视频播放器支持再次点击播放按钮
<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');
<p>inp.onclick = function() {
if (!isPlaying) {
isPlaying = true;
audio.currentTime = 0; // 将音频播放时间设置为0，以便重新播放
audio.play();
wdsj(1525);
}
else {
audio.pause();
isPlaying = false;
}
}</p>
<p>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);
}</p>
<p>function bofang(fps) {
img.src = "img1/" + fps + ".jpg";
console.log(fps);
}
</script></p>
</body>
</html>在第一次点击播放按钮后，变量isPlaying被设置为true，而在播放完毕后会被重置为false，这时再次点击播放按钮时isPlaying仍然为false，所以不会触发播放事件。为了解决这个问题，需要在点击播放按钮时判断isPlaying的值，如果为true则不执行播放事件，如果为false则执行播放事件。可以修改代码如下：
<pre><code>inp.onclick = function() {
if (!isPlaying) {
isPlaying = true;
audio.currentTime = 0; // 将音频播放时间设置为0，以便重新播放
audio.play();
wdsj(1525);
}
else {
audio.pause();
isPlaying = false;
}
}
</code></pre>
<p>这样就可以实现再次点击播放按钮时暂停播放。</p>
原文地址: https://www.cveoy.top/t/topic/n4nr 著作权归作者所有。请勿转载和采集!