问题描述

我有一系列视频，我想通过单击它们无缝循环播放，呈现出交互式动画的外观。

我已经设法通过使用Javascript计数器在点击时添加和删除css类来隐藏/显示视频，但是为了使视频在点击之间无缝过渡，我需要它们在触发之前播放到最后删除/添加事件。

我该怎么做呢？我一直在尝试为单击事件添加延迟，但到目前为止没有任何效果。

为了清楚起见，请查看这个小提琴（快速点击手视频最能说明问题）： 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;
}    
})

标签： javascriptjquery

通过阅读您的代码，我发现了不止一个问题，我现在将向您解释。

解决你的问题

关于@Ajay Kumar 答案的事实是正确的，但不是真的。要检测视频何时播放完毕，您应该使用endedJavaScript 中元素的属性。但请确保您仅从 a 调用它video tag，而不是从任何其他标签调用它。

这就是为什么，在我将在此之后向您解释的代码中，我使用了：

if(currentEgg.ended){
   ...
}

处理隐藏当前元素并显示下一个元素的代码何时执行或不执行。否则，即使视频尚未结束，您的代码也将始终执行。

注意：我将给你一个例子，说明它是如何只使用你问题的一个元素的，鸡蛋。

你可能不需要 jQuery。

我为什么要告诉你这些？因为您的代码的大部分行为都是由 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 的神奇之处。

使代码简单而实用。

我现在将详细介绍如何使用更简洁的代码完成相同的行为：

从 DOM 中检索所有视频元素

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中自己检查它。

javascript - 如何为 Javascript 视频播放触发器添加延迟