Camtasia with closed captioning in Storyline

Scott, I'm curious if you ever found a solution for this.

I did not figure out any elegant solutions.  What I have done is to burn the captions into the video from Camtasia. Then I cover the captions with a black box and create a toggle to make the box visible or hidden.

The only way I can figure to do this would be to use a custom player as a Web Object. But then you'd lose connection to the SL player.

I do like built-in subtitling methods. Camtasia's works really well. Even the inferior Mac version's captioning is pretty darn good. 

One thing you "could" try is customizing the player features and adding a PostMessage send / receive. This could give you a couple of nice additions to the Web Object method like the ability to pause and play the video from Storyline, open and close captions. May give this a play over the weekend.

If you haven't already, adding your voice to make this a feature request would be fantastic! This is something that I think Storyline needs pretty badly.

Thanks for the suggestions and recommendation. I will definitely make this feature request.

Hi Scott,

I played around with this some time ago. The best I could do was something akin to what Steve mentions with outputting the Camtasia vid with a transparent player and then importing the Camtasia output into SL as a web object.  But, as Steve mentions, you lose the connection to the SL player.  On the flip side, it does work in both flash and html5.  Here's a quick sample...

http://articulate-community.s3.amazonaws.com/Mike/2015/forums/CamtasiaCC/story.html

Mike

Nice job Mike! 

Hi Mike,

I have been trying to do exactly this and can't seem to get it to work! I've already tried adding it as a web object but having no luck. The player appears but the video has disappeared?

How did you get it to work?

Thanks in advance!

Kat

Kat,

I output from Camtasia with the following:

1. Custom Production Settings

2. MP4

3. Produce with Controller (stock settings)

From there, it's just a matter of adding the web object. To do so:

1. Make sure all of your Camtasia output is in a single folder. 

2. Rename the .html file to index.html

In this next image, my file is currently named "untitled.html".  I then rename it to index.html

And that's it.

Now add your web object in Storyline by simply pointing to the folder where these files reside.

I hope this helps!

Mike

PS. This likely won't play locally. You might have to load to a webserver to make sure it's working.  

Hi Mike,

Thanks so much for your help! So it turns out I was doing it right but I was using Camtasia v7.1 and out of all the controller designs, I managed to choose the one that wouldn't work for some reason! I went back and tested the other designs and they all worked but I upgraded to v8 anyway to add the HTML5 funcationality.

For those of you who come across this in the future...

in the hopes of saving you the couple of hours experimenting it took me, here are the steps I used to make it fit perfectly (using Camtasia 8 with Storyline 1).

Following Mikes instructions above, once you have added the captions and go to produce and share:

1. Choose custom production settings
2. MP4: Smart player (Flash/HTML)
3. Produce with controller (I used the transparent one)
4. Under Size I set both settings to the same size (your ratio/ size might be different. I was working with a Storyline file that was 1024x768)
   • Video size: width=976px, height=548px
   • Embed size: width=976px, height=550px (it auto adds some extra pixels here)
5. Set your caption type (I used closed captions)
6. Produce.
7. Go to the produced files and
   • rename the main html file (e.g. untitled.html) to index.html
   • open the embed.css file using Notepad and under .tscplayer_inline change the margin to 0px and the width and height to 99% (image below)

Then in your storyline file

1. Insert the webobject
2. Then resize it to be about 5 pixels more than your video output size (e.g. I used width=980px, height=555px)

And that's it. For me these settings meant my video sits perfectly in the frame with no scroll bars or white frames.

Hope this is helpful to someone else in the future!

Kat

Thanks Kat for sharing some more detailed steps here and I'm glad you got this to work as needed! 

Hi Mike,

As mentioned in an earlier post I got this working beautifully but I wanted to know if you have had problems with the webobject links breaking when you move files. I publish the files on my local drive and then zip them but when I send them to clients the links to the webobjects are breaking so they are just getting a blank screen. I can't work out why?

Have you encountered this or do you have any ideas?

Thanks,

Kat

Hi Kat,

This thread is a bit older so I'm not certain that Mike is still subscribed. You may want to message him directly using the 'contact me' button on his profile to reach out and see if he could share any information. 

Hi Kat,

Hmmm, I haven't run into that before. Would you be able to send me a sample published package so I could take a look?

Thanks!

Mike

Hey Kat,

Is your client viewing locally on their machine? If so, that web object may not play due to browser restrictions. However, if they load to the web and then run it, it should work.

I'm wondering if that's what they're running into?

MIke

I am having a similar problem in that my captioned videos play when published for the web, but they do not play when published for the LMS - no matter what browser is used.  The videos are hosted on a web server and I have tried inserting them into my storyline file via web object and embed code to no avail. 

If anyone has experience with this sort of problem, I could really use some help.

Melissa,

Is it possible that your LMS vendor has blacklisted the server where the videos are hosted?  I'm happy to take a look at the file and try and do some detective work if you like.

Hi Melissa,

Have you looked at uploading to another LMS to see if Scott's suggestion helps narrow down where the issue is? You can take a look at the SCORM Cloud set up which is an industry standard for testing LMS content. 

Hi Ashley,

Thanks for the reply. I did try testing in SCORM cloud, but unfortunately that did not work either. So, now I'm working with our IT team to try and troubleshoot further

Hi Scott,

Thanks for the suggestion.  We contacted our LMS vendor and are waiting for a response.

I figured out the problem and the solution is so simple.  All I did was add an S to the HTTP and it works.  YAY!

Well you beat me too it Melissa! But that was my next guess and link to the documentation about it here.