2016-07-15 184 views
-1

我正在使用Cuepoint.js创建文本链接,将HTML5视频提示为与特定文本行对应的时间标记。为链接动态分配一个已经写入数组的时间值作为字符串我知道我需要使用parseInt()从数组中检索整数,因为链接和它们的时间是动态的,所以我还需要分配环节中的for循环,他们随后被传递到另一个阵列的时间。这里的如何修复“未捕获的类型错误:无法在'HTMLMediaElement'上设置'currentTime'属性

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'属性:提供的double值不是有限的。

据我所知,这个整数并没有像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; 

})调用(这);

+0

没有提及currentTime的这里,只是“时间”,这是不同的。你可以发布小提琴或至少一些HTML和更多的jQuery? –

+0

当然,这里是Cuepoint.js代码,发生错误 - 添加到我原来的帖子。 – Alpinist1974

+0

嗯..仍然没有HTML,不能重现问题,只是JavaScript ...你可以在http://www.jsfiddle.net或http://www.jsbin.com上做一个fidde –

回答

0

我想通了。 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); 
     }