Video and image out of Sync

[Tom_Janus]

I have images on a slide that appear a specific times along the timeline.  They appear in sync with a video that plays at the start of the slide.  On the main menu a button is pressed to jump to the slide with the images and video.  When I Project>Preview, I press the button to jump to the slide, but the time from the time of clicking on the button to when the slide begins is several seconds.  When the slide plays, the video plays, but there is a now a delay for the images to appear, the video and images are not out of sync.  I'm concerned due to the lenght of video (6 minutes) and number of images (36), its taking too long to load.  It there a fix to this.  I use png images, and I try to keep their files size to to a miminum.  Thank you.

[Lilybiri]

Problem is not with the images but with the video which needs loading time. Is it not possible to distribute the video and images over several slides to shorten loadig time on each slide?

[Tom_Janus]

Thank you,  I will give it a try.

[David Burnham HBA]

One of the things I have noticed with the movement away from flash and now working with html, server latency (loading time) is a bigger issue. In a recent project I just completed I created the slide with a 3 minute video and timed the objects that appear on the slide to the video in the Captivate timeline. I then published that slide as an mp4 which now has all the images and text smart shapes and audio in the video file.  I then placed that mp4 on the slide a as multi-slide video and it plays nicely in the timeline. Normally I would do this kind of video editing in Adobe Premiere, but I wanted to try it in Captivate and it appears to be working well for the project needs. I have also cut up larger videos into smaller pieces and distributed them over a number of slides as Lilybiri suggests and this has also helped with the loading issue. But again I find that its best to use Adobe Premiere for doing this for longer videos of more than say 2 minutes in duration. Its the only way I believe that you can ensure synchronization.

[Tom_Janus]

David,  Thank you I will try this method.

[Tom_Janus]

David,   I'm not familar with the process of publishing a slide as a mp4 file. Do you make a project with a single slide with images and video, and then publish as a mp4 file?  Thank you for the clarification.

[TLCMediaDesign]

This is for HTML5 publishing. Just use it the way you have your slide set up. Put all of your images at the start of the slide and turn off their visibility.

I use it all the time. The only caveat is that the video tag may not be present, I also use a setTimeout to ensure the video tag is there.

[Lilybiri]

I'm not David, but if this is a slide in a project, just hide all the other slides and publish to MP4.

[Tom_Janus]

Thank you.  I understand the process of hiding all slides except the one to needed for the mp4 file, but under "Pulish" button, I do not have the option for a mp4 file. What is the best method to accomplish making a slide a mp4 file?  Thank you.

[Lilybiri]

Is this a responsive project? Such a project cannot be published to MP4.

[Tom_Janus]

Yes, it is a responsive project, so I do not have publish as a video option available.

[Lilybiri]

Video cannot be responsive of course. You can make it smaller or bigger, but never responsive in the true sense of the term.

Are you sure to need a responsive project? Which work flow did you use: Fluid Boxes or Breakpoint Views? Maybe this post can clarify why you may perhaps better choose for a rescalable project:

Fluid Boxes Or Breakpoint Views? - Captivate blog

[David Burnham HBA]

As per Lilybiri's response if it is a slide within the project, or in other cases, if the video is smaller than the slide that it plays in then I would create another project being a single slide at the project size equal to the size of the video. For example if the video is say 640 x 360 then I would make a project at that size, so when I publish as mp4 from Captivate that would be the video size. I would then place the video on the slide in the project.

[TLCMediaDesign]

Not sure where all of tis publishing as MP4 came from. The JS I posted works in HTML5 with a video inserted on a slide like you mention in your original post. It actually works best with event video and just set the timing of the slide to 3 seconds.

[Lilybiri]

David, another David posted an alternative workflow, where everything would be in one video by using Premiere Pro. Hence the confusion.

[TLCMediaDesign]

I see, thanks Lieve.

[TLCMediaDesign]

You can use JavaScript to monitor the time update of a video, regardless of how long it takes to load. If you execute this on enter of the slide that has video, you can turn on and off elements and it will always be in-synch. You'd need to add your conditions in the vidTimer function.

var vid = document.getElementsByTagName("video")[0];
vid.addEventListener("timeupdate",vidTimer,false);

function vidTimer()
{  
if ( vid.currentTime > 37.5 && vid.currentTime < 41.7 )
{ 
  cp.show("user_name"); 
}
else
{
  cp.hide("user_name"); 
}

  if ( vid.currentTime > 42 )
{
  vid.removeEventListener("'timeupdate", vidTimer, false);
}
}

[Tom_Janus]

Thank you for the suggestion.  This could work.

[Tom_Janus]

I have tried the JavaScipt approach, but it is not working the video plays, but the text objects do not appear.  I'm not proficient in JavaScript, so I might have coded it wrong.  Please let me know where I made the error.  Thanks.

var vid = document.getElementsByTagName("video_01")[0];

vid.addEventListener("timeupdate",vidTimer,false);

function vidTimer()

{

if (vid.currentTime>4 && vid.currentTime<8)

{

cp.show("txt_3Sec");

}

else

{

cp.hide("txt_3Sec");

}

if (vid.currentTime>20)

{

vid.removeEventListener("timeupdate",VidTimer,false);

}

}

[TLCMediaDesign]

You cannot name the video by the name of the video, it must be:

var vid = document.getElementsByTagName("video")[0];

[Tom_Janus]

Thank you,  I change the script to:

var vid = document.getElementsByTagName("video")[0];

vid.addEventListener("timeupdate",vidTimer,false);

function vidTimer()

{

if (vid.currentTime>4 && vid.currentTime<8)

{

cp.show("txt_3Sec");

}

else

{

cp.hide("txt_3Sec");

}

if (vid.currentTime>20)

{

vid.removeEventListener("timeupdate",VidTimer,false);

}

}

Unfortunately,  The text object still fails to show.  Not sure where I'm making the mistake.

[TLCMediaDesign]

sometimes the video tag is not there yet when the script executes. Try this ( you can always log everything to see what's going on.):

var interval = setInterval( checkExists, 100, e );

function checkExists( e )
{
var vid = document.getElementsByTagName("video")[0];

  if ( vid.length > 0 )
{
  clearInterval(interval);
  vid.addEventListener("timeupdate",vidTimer,false);
}

function vidTimer()
{

if (vid.currentTime>4 && vid.currentTime<8)
{
  cp.show("txt_3Sec");
}
else
{
  cp.hide("txt_3Sec");
}

if (vid.currentTime>20)
{
  vid.removeEventListener("timeupdate",VidTimer,false);
}
}