单击另一个元素时使用 clickToggle 和关闭元素

Question

我根据 Felix Kling's response to click toggle 编写了这段代码。我想知道是否有更好的编写方式，以及如何在单击另一个元素时关闭一个元素。

我正在使用它在点击时播放视频的某些点并在二次点击时关闭它们。

我已经编写了一个函数来在使用类退出时关闭，但它会减慢速度并中断事件的完成。

$(document).on('keydown', function(e) {
    if(e.keyCode == 27) {
        var buttons = $("button");
        if ( buttons.hasClass("open") ) {
            myVideo.currentTime = 2.8;
            myVideo.play();
            setTimeout(function() {
                myVideo.pause();
            }, 540);
            buttons.removeClass("open");
        }
    }
})


var myVideo = document.getElementById("video");

$("#button-1").clickToggle(function() {
    myVideo.currentTime = 2;
    myVideo.play();
    $(this).addClass("open");
    setTimeout(function() {
        myVideo.pause();
    }, 900);
}, function() {
    myVideo.currentTime = 2.8;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 540);
});

$("#button-2").clickToggle(function() {
    myVideo.currentTime = 3.05;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 850);
}, function() {
    myVideo.currentTime = 3.8;
    myVideo.play();
    setTimeout(function() {
        myVideo.pause();
    }, 680);
});

Answer 1

嗯，为了更可靠地在正确的位置暂停视频，您可以监听 timeupdate 事件：

myVideo.addEventListener("timeupdate", function(){
    if(myVideo.currentTime >= 2.9) {
        myVideo.pause();
    }
});

当然，当您开始播放下一段时，您不希望该侦听器继续执行。您可以删除侦听器，并为下一段用新的替换它。或者您可以将视频开始和停止时间存储在这样的数组中：

var videoSegments = [
        { startTime: 2, endTime: 2.9},
        { startTime: 2.8, endTime: 3.34},
        { startTime: 3.05, endTime: 3.9},
        { startTime: 3.8, endTime: 4.48}
    ];

现在您可以只使用一个侦听器：

myVideo.addEventListener("timeupdate",function(){
    if(myVideo.currentTime >= videoSegments[currentSegment].endTime) myVideo.pause();
});

如果您的 onclick 函数执行如下操作，您也不需要 clickToggle：

$(button).click( function() {

     ...other stuff here...

     currentSegment++;
     myVideo.currentTime = videoSegments[currentSegment].startTime;
     myVideo.play();
});

每次单击时，它都会将视频前进到下一段并播放。听众会在视频到达正确位置时停止播放。

这是一个工作示例：http://jsfiddle.net/w30j2acc/2/

单击另一个元素时使用 clickToggle 和关闭元素

Using clickToggle and closing element when another is clicked

javascript

jquery

html5-video

toggle