Camtasia with closed captioning in Storyline

As part of my regular workflow I do a lot of authoring in Camtasia and import it into Storyline as an MP4. I prefer the subtitle functionality of Camtasia to the Storyline methods.

I am wondering if anyone has a way I can toggle on and off the camtasia generated subtitles in storyline and still maintain HTML5 compatibility.

21 Replies
Steve Flowers

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.

Mike Enders

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

 

 

Mike Enders

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.  

 

Kat Fardian

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)

css file

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

 

Kat Fardian

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

Melissa Ennis

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.