Javascript Viideo.JS Thumnails:uncaughttypeerror:无法读取属性'；src&x27；未定义的

我正在尝试破解video.js html5播放器，以便在鼠标悬停时显示时间线缩略图（就像yoube上的一样）。我在这里遇到了这个插件：

这是可行的，但我的主要问题是我的视频长度不同，而且很多都在服务器上（基本上，这是一个成人网站）。 所有的视频缩略图都是在一个文件夹中生成的，总共有19个

我修改了原始代码，因此所有19个Thumnail都可以在场景中使用。该网站使用smarty。 从这里开始：

video.thumbnails({
  0: {
    src: 'http://example.com/thumbnail1.png',
    width: '120px'
  },
  5: {
    src: 'http://example.com/thumbnail2.png'
  }
});

为此：

{php}
global $video, $tmbint;
echo "<script>";
echo "video.thumbnails({";

for($i = 0; $i <= 19; $i++) {

    if($i == 0) { echo "0: { src: '/media/videos/tmb/".$video['VID'].'/'.($i+1).".jpg', style: { width: '120px', left: '-60px' }  }"; }
          else  { echo $i * $tmbint.": { src: '/media/videos/tmb/".$video['VID'].'/'.($i).".jpg', style: { width: '120px', left: '-60px' }  }"; }
    if($i != 19) echo ", \n";
}


echo "});";

echo "</script>";

{/php}

然后我把它变成这样：

 mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);

  unit = (progressControl.width()) / 20;
  moffset = left;

  for (time in settings) {
    if (mouseTime > time) {
      active = Math.max(active, time);
    }
  }

  active = Math.floor(moffset / unit) * Math.floor(duration / 20);

  setting = settings[active];
  if (setting.src && img.src != setting.src) {
    img.src = setting.src;
  }
  if (setting.style && img.style != setting.style) {
    extend(img.style, setting.style);
  }

  width = getVisibleWidth(img, setting.width || settings[0].width);
  halfWidth = width / 2

---

然而，我在标题中发现了错误。前10秒是可以的，但是当尝试移动到第二个缩略图时，错误会迅速消失，依此类推。抱歉发了这么长的帖子，这是我第一次来这里。有什么想法吗？

哇！我发现了错误。$tmbint为零。我在一个单独的PHP文件中添加了这一行：

$tmbint = @floor($video['duration'] / 20);

---

现在它可以工作了。

看起来您正在使用的[active]数组的索引可能超出范围…如果我将其减少到1，它是好的，但在整个序列中只显示一个缩略图。如果我将其调整为2，那么它会将缩略图应用到视频的一半，并再次抛出错误。

$tmbint = @floor($video['duration'] / 20);