Highlighted

Video and image out of Sync

Explorer ,
May 04, 2018

Copy link to clipboard

Copied

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.

Views

344

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Video and image out of Sync

Explorer ,
May 04, 2018

Copy link to clipboard

Copied

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.

Views

345

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Most Valuable Participant ,
May 04, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 04, 2018

Copy link to clipboard

Copied

Thank you,  I will give it a try.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
May 04, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 07, 2018

Copy link to clipboard

Copied

David,  Thank you I will try this method.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Enthusiast ,
May 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Most Valuable Participant ,
May 07, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 07, 2018

Copy link to clipboard

Copied

I see, thanks Lieve.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 06, 2018

Copy link to clipboard

Copied

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);
}
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 07, 2018

Copy link to clipboard

Copied

Thank you for the suggestion.  This could work.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 18, 2018

Copy link to clipboard

Copied

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);

}

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 21, 2018

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Explorer ,
May 21, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

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);
}
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Resources
Captivate User Guide
New Group