视频源排队功能无意跳过数组元素

huangapple go评论57阅读模式
英文:

Video source queuing function skips array element unintentionally

问题

I am trying to make a simple queue system that plays videos turn by turn. The video source is stored inside an array. The below code has a function that gets the first index element from the array, plays that video, then removes that item from the array. It repeats the same method again and again until no elements are found inside the array.

它试图创建一个简单的视频队列系统,依次播放视频。视频来源存储在一个数组中。下面的代码包含一个函数,该函数从数组中获取第一个索引元素,播放该视频,然后从数组中删除该项。它会一遍又一遍地重复相同的方法,直到数组中不再有元素。

It plays the first video as intended, but then skips the second video (array element) and plays the third. Where did I go wrong and how can I fix it?

它按预期播放第一个视频,但然后跳过了第二个视频(数组元素)并播放了第三个。我做错了什么,如何修复它?

英文:

I am trying to make a simple queue system that plays videos turn by turn. The video source is stored inside an array. The below code has a function that gets the first index element from the array plays that video, then removes that item from the array. It repeats the same method again and again until no elements are found inside the array.

It plays the first video as intended, but then skips the second video (array element) and plays the third. Where did I go wrong and how can I fix it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

myArr = [&quot;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4&quot;, &quot;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4&quot;, &quot;http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4&quot;]

function test() {
  $(&#39;#player&#39;).attr(&#39;src&#39;, myArr[0])

  $(&quot;#player&quot;).on(&quot;loadedmetadata&quot;, function() {
    myArr = myArr.slice(1)

    var onEnd = setInterval(() =&gt; {
      $(&quot;#player&quot;).on(&quot;timeupdate&quot;, function() {
        var cTime = this.currentTime;
        var dur = this.duration;
        //console.log(cTime, dur)

        //check if video finished playing
        if (cTime == dur) {
          console.log(&#39;video Ended&#39;)
          if (myArr.length != 0) {
            clearInterval(onEnd)
            test()
          } else {
            clearInterval(onEnd)
            console.log(&#39;all videos played&#39;)
          }
        }
      });
    }, 500)
  })
}

test()

<!-- language: lang-css -->

video {
  width: 100%;
  height: 60vh;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;

&lt;video id=&quot;player&quot; muted autoplay&gt;&lt;/video&gt;

<!-- end snippet -->

答案1

得分: 1

在尚未播放所有视频的情况下,您再次调用test函数。但是,此函数为loadedmetadata设置了一个事件监听器,该监听器会将数组推进一位。多次调用test会为loadedmetadata事件设置多个事件监听器,每个监听器都会触发并推进数组。您需要重新构建您的代码,以确保只附加一次监听器。

英文:

In the case that not all videos were played yet, you call the test function again. But this function sets an event listener for loadedmetadata, and that listener advances the array by one. By calling test multiple times, you are setting multiple event listeners for the loadedmetadata event, each of which will fire and advance the array. You need to restructure your code such that the listener is only attached once.

huangapple
  • 本文由 发表于 2023年5月10日 18:08:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76217177.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定