Question

我试图破解video.js html5播放器，以便在鼠标悬停期间显示时间轴缩略图（就像在yoube上一样）。我在这里看到了这个插件：https://github.com/brightcove/videojs-thumbnails

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

我修改了原始代码，因此所有19个thumnails都在场景中使用。该网站使用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}

我还必须修改原始的videojs.thumbnails.js以检查视频长度，并根据视频的长度平均下降。

原来是这样的：

mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);
      for (time in settings) {
        if (mouseTime > time) {
          active = Math.max(active, time);
        }
      }
      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;

然后我把它变成了这个：

 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秒没问题，但是当试图移动到第二个缩略图时，它会迅速消除错误，依此类推。对不起，这是我第一次来这里。有什么想法吗？

Answer 1

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

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

现在可行。

Viideo.JS Thumnails：Uncaught TypeError：无法读取未定义的属性'src'

1 个答案: