我有一系列视频，我想通过单击它们来无缝地循环播放，以呈现交互式动画的外观。
通过使用Javascript计数器添加和删除点击时的CSS类，我设法使视频在点击时隐藏/显示，但是为了使视频在点击之间无缝过渡，我需要将它们播放到在触发删除/添加事件之前结束。
我将如何去做？我一直在为click事件添加延迟，但到目前为止没有任何效果。
请检查此小提琴是否清楚（快速单击手势视频可以最好地说明问题所在）： https://jsfiddle.net/62rf3mtw/19/
var hand1 = document.getElementById("hand1");
var hand2 = document.getElementById("hand2");
var hand3 = document.getElementById("hand3");
var hand4 = document.getElementById("hand4");
var handcount = 0
$(".hand").click(function() {
handcount++;
if(handcount == 1) {
$(".hand1").addClass("hide");
hand1.pause();
hand1.currentTime = '0';
$(".hand2").get(0).play();
$(".hand2").removeClass("hide");
}else if(handcount == 2){
$(".hand2").addClass("hide");
hand2.pause();
hand2.currentTime = '0';
$(".hand3").get(0).play();
$(".hand3").removeClass("hide");
}else if(handcount == 3){
$(".hand3").addClass("hide");
hand3.pause();
hand3.currentTime = '0';
$(".hand4").get(0).play();
$(".hand4").removeClass("hide");
}else if(handcount == 4){
$(".hand4").addClass("hide");
hand4.pause();
hand4.currentTime = '0';
$(".hand1").get(0).play();
$(".hand1").removeClass("hide");
handcount = 0;
}
})
答案 0 :(得分：1)
通过阅读您的代码，我发现了多个问题，现在我将向您解释。
关于@Ajay Kumar答案的事实是正确的，但并非正确。要检测视频何时播放完毕，应使用JavaScript中元素的ended属性。但是请确保仅从video tag调用它，而不从其他任何标签调用它。
这就是为什么在此之后我会在代码中向您解释的原因，
if(currentEgg.ended){
...
}
处理何时隐藏当前元素并显示下一个元素的代码是否执行。否则，即使视频尚未结束，您的代码也将始终执行。
注意： 我将为您提供一个示例，说明如何仅使用问题的一个要素Eggs来工作。
我为什么要告诉你这个？因为您的大多数代码行为都是由HTML5标准处理的。这意味着您实际上并不需要jQuery来播放视频或为代码提供任何其他功能。
这真的意味着很多事情，实际上，我将展示，并且证明您在示例中展示的意思。
让我们说您拥有这样的HTML：
<div class="eggs">
<video class="egg" autoplay muted src="http://178.128.41.21/assets/imgs/egg/01_Monster/01_Monster_in.mp4?v=ce3e201d46" type="video/mp4"></video>
<video class="hide egg" muted src="http://178.128.41.21/assets/imgs/egg/01_Monster/02_Monster_click_1.mp4?v=ce3e201d46" type="video/mp4"></video>
<video class="hide egg" muted src="http://178.128.41.21/assets/imgs/egg/01_Monster/03_Monster_click_2.mp4?v=ce3e201d46" type="video/mp4"></video>
<video class="hide egg" muted src="http://178.128.41.21/assets/imgs/egg/05_Meat/03_Meat_click_3.mp4?v=ce3e201d46" type="video/mp4"></video>
<video class="hide egg" muted src="http://178.128.41.21/assets/imgs/egg/05_Meat/05_Meat_click_4.mp4?v=ce3e201d46" type="video/mp4"></video>
</div>
我敢打赌，仅使用egg和hide这两个类，您会发现它看起来更简单。
您可能会问自己：“但是，那我要如何制作动画？” 。好吧，看看JavaScript可以实现的神奇效果。
我现在将详细介绍如何使用更简洁的代码实现相同的行为：
var eggElements = document.querySelectorAll(".egg"),
eggClick = document.querySelector(".eggs"),
eggcount = 0;
现在，我们将eggElements中的每个视频标签都作为数组，而处理点击事件的div位于eggClick中。看起来很棒，对吧？看一下处理程序功能。
eggClick.addEventListener("click", function() {
let currentEgg = eggElements[eggcount],
nextEgg = (eggcount + 2 > eggElements.length ? eggElements[1] : eggElements[eggcount + 1])
if (currentEgg.ended) {
currentEgg.classList.add("hide");
currentEgg.pause();
currentEgg.currentTime = '0';
nextEgg.play();
nextEgg.classList.remove("hide");
eggcount = (eggcount + 2 > eggElements.length ? 1 : eggcount + 1);
}
});
有了这个，您就可以摆脱那些多个if语句并缩短代码。
为证明您的方法有效，您可以在此LIVE DEMO中自行检查。
答案 1 :(得分：0)
检查视频的结束属性
$(".hand").click(function(e) {
if (e.target.ended) {
handcount++;
if(handcount == 1) {
$(".hand1").addClass("hide");
hand1.pause();
hand1.currentTime = '0';
$(".hand2").get(0).play();
$(".hand2").removeClass("hide");
}else if(handcount == 2){
$(".hand2").addClass("hide");
hand2.pause();
hand2.currentTime = '0';
$(".hand3").get(0).play();
$(".hand3").removeClass("hide");
}else if(handcount == 3){
$(".hand3").addClass("hide");
hand3.pause();
hand3.currentTime = '0';
$(".hand4").get(0).play();
$(".hand4").removeClass("hide");
}else if(handcount == 4){
$(".hand4").addClass("hide");
hand4.pause();
hand4.currentTime = '0';
$(".hand1").get(0).play();
$(".hand1").removeClass("hide");
handcount = 0;
}
}
})
答案 2 :(得分：0)