包装在setTimeout

Question

我一直致力于在一个网页上处理多个小视频元素的代码，但我无法让多个进度条与各自的视频同步。

（Current jsFiddle prototype）

这段代码$(this).find("progress").attr("value", $("video", this)[0].currentTime);似乎在main函数内部工作，但当我用setTimeout将其包装在另一个函数中时，进度条实际上是动画我得到了这个错误：

  

“无法在 功能 中读取未定义的属性'currentTime'”

我尝试了一些变化，看看我是否可以自己动手，但是我无法通过像往常一样在墙上抛出代码来修复它。

有人能告诉我它为什么会这样做吗？

Answer 1

在setTimeout this this不是主this。所以你的代码不起作用。要在setTimeout中工作，您需要在setTimeout之前获取var that = this; setTimeout(function(){ // here use that },100); 并使用它。

实施例

import {Component, ChangeDetectorRef} from '@angular/core';

Answer 2

您必须将进度最大值更改为视频持续时间或总时间。并使其成为当前时间的价值。然后我们走吧

$(document).ready(function(){
    var video = $('#YourVideoIDorClass').get(0`);
    video.addEventListener("onplaying", function () {
       progress.val = video.currentTime
    }, false);

})