Single Caption for Image

[MDrooker]

Is there a config that allows a single caption per image generated?

Right now it carries over the previous caption from the image before- And while I understand that works well for closed-caption purposes, we need it to be a single caption to describe the image.

There must be a setting I am missing-

Thanks

[h2non]

What kind of caption file are you using? SubRip?

[MDrooker]

Im using the config object like this - var images = [ { path: 'assets/image_001.jpg', caption: 'First Picture' }, { path: 'assets/image_002.jpg', caption: 'Second Picture' }, { path: 'assets/image_003.jpg', caption: 'Third Picture' }, { path: 'assets/image_004.jpg', caption: 'Fourth Picture' }, { path: 'assets/image_005.jpg', caption: 'Fifth Picture' } ] And the videoOptions like -

var videoOptions = { loop: 5, captionDelay: 200, transition: true, useSubRipSubtitles: false, // Use ASS/SSA subtitles instead subtitleStyle: { Fontname: 'Verdana', Fontsize: '78', PrimaryColour: '11861244', SecondaryColour: '11861244', TertiaryColour: '11861244', BackColour: '-2147483640', Bold: '3', Italic: '0', BorderStyle: '2', Outline: '2', Shadow: '3', Alignment: '1', // left, middle, right MarginL: '40', MarginR: '60', MarginV: '40' } } <-was from the example

Thanks-

[MDrooker]

Does that look about right?

[yoga80]

I have similar captions and captions always don't appear in right fashion along with the images. They get crazy. Tried all caption related options like

          imageObject.captionDelay = 1
          imageObject.captionStart = 2
          imageObject.captionEnd = 4

with both second/millisecond values. Still it isnt perfect.

[mifi]

i also had problems with captions. there is a bug in the code. Try my fork: https://github.com/h2non/videoshow/pull/72

[csotiriou]

@mifi I have the same problem, even after using your code.

What does your code fix exactly?

Here is my code. Output mp4 behaves erratically.

const videoOptions = {
  loop: 5,
  fps: 2,
  transition: false,
  transitionDuration: 0, // seconds
  useSubRipSubtitles: false,
  videoBitrate: 1024,
  videoCodec: "libx264",
  captionDelay: 150,
  size: "640x?",
  audioBitrate: "64kk",
  audioChannels: 1,
  format: "mp4",
  pixelFormat: "yuv420p",
  useSubRipSubtitles: false
};

function getVideoshowImageDescriptors(imageFilePaths: string[]): Object[] {
  const sortedImagePaths = imageFilePaths.sort();
  let result = [];
  sortedImagePaths.forEach((filePath, index) => {
    const currentStart = index;
    result.push({
      path: filePath,
      caption: fileNameProcessor.getCaptionFromImageName(filePath),
      loop: 1,
      captionDelay: 0,
      captionStart: currentStart * 1000,
      captionEnd: (currentStart + 1) * 1000
    });
  });
  return result;
}

And then I do: videoshow(<<getVideoShowImageDescriptors(<<arrayOf5ImagePaths>>, Object.assign(videoOptions))

The captions are there, but they are totally misplaced.

@h2non The example is confusing using captions (and possibly wrong, since it should probably be in miliseconds, and it seems it is in seconrds).

Can we please have some guidance on the input needed for captions?

[csotiriou]

I managed to solved this, and also answer the original poster's problem, because I had the exact same one:

@h2non, in order to do what we want, we should normally give the following arguments to each image:

{
      path: filePath,
      caption: fileNameProcessor.getCaptionFromImageName(filePath),
      loop: 1,
      captionDelay: 0,
      captionStart: currentIndex * 1000,
      captionEnd: (currentIndex + 1) * 1000
    }

Now, this should output the subtitles we want under normal circumstances. * But * the captions are totally wrong. Here is the problematic code inside the library:

In render.js

function renderCaption(image, index, offset, params) {
  var loop = (+image.loop || +params.loop) * 1000
  var delay = +image.captionDelay || +params.captionDelay || 1000
  var startTime = offset + (+image.captionStart || 1000)
  var endTime = offset + (+image.captionEnd || (loop - delay))

........

I see the following problems:

1. Here, you use the "+" sign to make it a number (or NaN if the argument is not provided). However, you haven't taken into account that if the argument IS provided and is 0, then the "captionDelay", "captionStart" and "captionEnd" will return to the default values, since "0" is a falsey value.
2. Even with 1) fixed, the fact that you are keeping the offset around and passing it again makes it impossible to have the correct subtitle placement.

With this code, here is what the proper arguments would be, in order to "trick" the code into doing what we want:

function getVideoshowImageDescriptors(imageFilePaths: string[]): Object[] {
  const sortedImagePaths = imageFilePaths.sort();
  let result = [];
  sortedImagePaths.forEach((filePath, index) => {
    result.push({
      path: filePath,
      caption: fileNameProcessor.getCaptionFromImageName(filePath),
      loop: 1,
      captionDelay: 1,
      captionStart: 1,
      captionEnd: 1000
    });
  });
  return result;
}

As hardcoded as it may seem, it's the only way.

@h2non I would fork the project and fix it myself, however I am not sure if fixing this render process will break everything else (or projects that are currently based on this).