Question

我根据对Felix Kling's的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();
});

如果您的clickToggle函数执行类似的操作，那么您也不需要onclick：

$(button).click( function() {

     ...other stuff here...

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

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

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

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

1 个答案: