javascript - 我的 JavaScript 的缺陷在哪里

Question

所以我试图制作一个对象来处理 HTML 视频，方法是在它达到某些第二个标记时暂停它。在每次暂停时，都会出现某种类型的“下一步”按钮，然后可以继续播放视频。我的评论很好的代码应该让我更清楚我想要实现的目标。

HTML:

    <div class="fancyvid">
        <video preload="auto" poster="assets/myposter.png" id="ssvid">
            <source src="assets/myvideo.mp4" type="video/mp4" />
        </video>
        <div class="textlayer" data-pauseat="5">
            <h1>First pause (5 seconds)</h1>
            <p>Here's some text for the first pause event</p>
            <button class="next-btn">Next</button>
        </div>
        <div class="textlayer" data-pauseat="11">
            <h1>Second pause (11 seconds)</h1>
            <p>Here's some text for the second pause event</p>
            <button class="next-btn">Next</button>
        </div>
        <div class="textlayer" data-pauseat="15">
            <h1>Third pause (15 seconds)</h1>
            <p>Here's some text for the third pause event</p>
            <button class="next-btn">Next</button>
        </div>
    </div>
    <div class="button-holder">
        <button id="video-play">Play Interactive Video</button>
        <script type="text/javascript">
            $(function(){
                $('#video-play').click(function () {
                    VidHandler.PlayFromBeginning();
                    $(this).remove();
                });
            })
        </script>
    </div>

其他 JavaScript:

$(function(){
    window.VidHandler = (function (vidId) {

        // refrence to VidHandler for passing into certain scopes
        var that = this;

        // get video DOM element
        this.videlem = $('#' + vidId)[0];

        // get container 
        this.$container = $(this.videlem).closest('div.fancyvid');

        // get the reused "Next" button
        this.$nextbtn = this.$container.find('.next-button');

        // start tick at zero
        this.tick = this.videlem.currentTime;

        // add event listener to video for time events
        this.videlem.addEventListener('timeupdate',function(e){
            console.log('currentTime: ' + that.tick); // TEST
            var pfunc = that.PauseFunctions[that.tick];
            if ( pfunc !== undefined ) // if there is a pause function corresponding to this second
            {
                that.videlem.pause();
                pfunc();
            }
            else
            {
                ++that.tick;
            }
            //
        }, false);


        // plays video from beginning
        this.PlayFromBeginning = function ( ) {
            this.videlem.currentTime = 0; 
            this.videlem.play();
        }

        // returns a jQuery element of the HTML layer
        // associated with a particular second mark
        this.GetLayerElement = function ( secondMark )
        {
            return this.$container.find('div.textlayer[data-pauseat="' + secondMark + '"]');
        }

        // maps second indices in the video to events 
        // that are called when the video pauses at that second
        this.PauseFunctions = {
            5: function () {
                var $layer = that.GetLayerElement(5);              
                $layer.show();
                var $nextbtn = $layer.find('.next-btn');
                $nextbtn.click(function () {
                    $layer.hide();
                    that.videlem.play();
                });
            },
            11 : function () {
                console.log("The pause function of the event at the 11-second mark was called");
            },
            15: function () {
                console.log("The pause function of the event at the 10-second mark was called");
            }

        };

        return this;

    })("ssvid");
});

我现在面临的主要问题是我的

 this.videlem.addEventListener('timeupdate',function(e){

事件似乎没有均匀触发。

作为测试，我做了

    var first_millmark = new Date();

    // add event listener to video for time events
    this.videlem.addEventListener('timeupdate',function(e){
        console.log('currentTime: ' + that.tick); // TEST
        console.log("Milliseconds past: " + (new Date() - first_millmark));//TEST

输出是

vidpage.js:23 currentTime: 0 vidpage.js:24 Milliseconds past: 2279

vidpage.js:23 currentTime: 1 vidpage.js:24 Milliseconds past: 2777

vidpage.js:23 currentTime: 2 vidpage.js:24 Milliseconds past: 3277

vidpage.js:23 currentTime: 3 vidpage.js:24 Milliseconds past: 3527

vidpage.js:23 currentTime: 4 vidpage.js:24 Milliseconds past: 4027

vidpage.js:23 currentTime: 5 vidpage.js:24 Milliseconds past: 4276

vidpage.js:23 currentTime: 5 vidpage.js:24 Milliseconds past: 4281

哎呀!出了什么问题？是否有一种完全更好的方式来实现我正在尝试实现的这种模式？

Answer 1

任何东西都可以延迟 javascript 的进程，从 JS 单独使用的内存到您的计算机运行缓慢。

但是根据你的问题:

So I'm trying to make an object that handles an HTML video by making it pause when it reaches certain second marks

我怀疑这个函数会很好地解决问题，我会尽快返回它，直到您到达视频应该暂停的点。

所以，例如:

timesToPause=[100,1000,10000];

function check_timer(cTime){ //return true 

    if(cTime >= timesToPause[0]){
      timesToPause.splice(0, 1); //Remove this timer from timesToPause;
      pauseVideo(); // whatever your function is to pause the video or run your 
      return true;
    }
return false;
}

现在，我还没有对此进行全面测试，但代码应该会在指定的计时器处暂停视频。例如，如果您在 1200 秒开始播放视频，它将暂停视频两次，同时触发 100 和 1000 两个计时器；你可能想在删除部分添加一个循环，以防他们跳过它，所以它只播放一次。