如何修复“未捕获的 TypeError：无法在 'HTMLMediaElement' 上设置 'currentTime' 属性”答案

【问题标题】：How to fix "Uncaught TypeError: Failed to set the 'currentTime' property on 'HTMLMediaElement'如何修复“未捕获的 TypeError：无法在 'HTMLMediaElement' 上设置 'currentTime' 属性”
【发布时间】：2016-11-19 02:10:11
【问题描述】：

我正在使用 Cuepoint.js 创建将 HTML5 视频提示到与特定文本行相对应的时间标记的文本链接。我需要动态地为链接分配一个已经作为字符串写入数组的时间值。我知道当从数组中检索值时，我需要使用 parseInt() 将值重新转换为整数。由于链接及其时间是动态的，因此我还需要在 for 循环中分配链接的时间，然后将它们推送到另一个数组。这是代码

    var cueTimes = [];
    for (var j = 0; j < textItems.length; j++) {
        var times = parseInt(timeItems[j]);
        cueTimes.push(times);
        $(".field-name-field-text-"+(j+1)+" > div > div").click(function(){ cuepoint.setTime(cueTimes[j])});
    console.log(cueTimes[j]);
    }

但是，当我运行代码时，我收到了这个错误。

未捕获的 TypeError：无法在 'HTMLMediaElement' 上设置 'currentTime' 属性：提供的双精度值是无限的。

据我所知，jQuery 没有正确读取整数。但是，当我将时间值输出到控制台时，它们显示为整数。当我使用静态数组索引（例如设置 cueTimes[0]）测试代码时，代码会按预期运行和工作。

非常感谢任何有关如何解决/解决此问题的建议。

谢谢！

这是提示错误的 Cuepoint.jS 文件中的行：

Cuepoint.prototype.setTime = function(time) {
        this.time = time;
        this.video.currentTime = time;
        return this.video.play();
    };

Cuepoint.js 代码：

(function() {
/* Cuepoint Coffee. A simple library for HTML5 Video Subtitles and Cuepoints */

/**
 * @class Utils 
*/

var Cuepoint, Utils, utils;
Utils = (function() {
    function Utils() {}
    Utils.prototype.log = function(args) {
        this.args = args;
        if (window.console) {
            return console.log(Array.prototype.slice.call(this, arguments));
        }
    };
    return Utils;
})();

/**
 * @class Cuepoint
 */

Cuepoint = (function() {
    function Cuepoint() {
        this.nativeKeys = Object.keys;
    }
    Cuepoint.prototype.init = function(slides) {
        var key, value, _results;
        this.slides = slides;
        this.subtitles = document.getElementById("subtitles");
        this.video = document.getElementById("video");
        _results = [];
        for (key in slides) {
            value = slides[key];
            this.addSlide(key, value);
            _results.push(this.events.call);
        }
        return _results;
    };
    Cuepoint.prototype.events = function() {};
    Cuepoint.prototype.currentTime = function() {
        return this.video.currentTime;
    };
    Cuepoint.prototype.update = function(html) {
        this.html = html;
        return this.subtitles.innerHTML = this.html;
    };
    Cuepoint.prototype.setTime = function(time) {
        this.time = time;
        this.video.currentTime = time;
        return this.video.play();
    };
    Cuepoint.prototype.addSlide = function(time, html) {
        var self;
        this.time = time;
        this.html = html;
        self = this;
        return this.video.addEventListener("timeupdate", function() {
            if (this.currentTime >= time && this.currentTime <= time + 0.3) {
                return self.update(html);
            }
        },
        false);
    };
    Cuepoint.prototype.play = function() {
        return this.video.play();
    };
    Cuepoint.prototype.pause = function() {
        if (!this.video.paused) {
            return this.video.pause();
        }
    };
    return Cuepoint;
})();
utils = new Utils;
window.cuepoint = new Cuepoint;

}).call(this);

【问题讨论】：

这里没有提到currentTime，只是'时间'，这是不同的。你能发布一个小提琴或至少一些 html 和更多的 jquery 吗？
当然，这是发生错误的 Cuepoint.js 代码 - 添加到我的原始帖子中。
hmm .. 仍然没有 html，无法仅使用 javascript 重现问题...您可以在 jsfiddle.net 或 jsbin.com 上提出问题

标签： jquery arrays video parseint

【解决方案1】：

我想通了。 click() 函数的关闭导致迭代器变量的值在该函数中丢失。我通过创建一个自执行函数来本地访问变量来解决它，这里解释：

这段代码完成了：

for(var j = 0; j< textItems.length; j++){
            (function(k){
            text[k] = parseInt(timeItems[k]);
            $(".field-name-field-text-"+(k+1)+" > div > div").click(function(){ cuepoint.setTime(text[k])});
        })(j);  
        }

【讨论】：