Can the Close Caption button's icon be changed?

Feb 20, 2018

Hello All, 

Does anyone know if there is a way to change the icon on the Closed Caption button in Storyline 3? The client in which I am building for requires the closed caption button to display a CC, and the default button on the Storyline player is just an image of a Caption box.

Thanks

25 Replies
Tricia Ransom

Hi Ashley,

What is the feature enhancement request URL? I created customer training, and most of my customers are banks. They have been complaining that the CC button doesn't look like CC.

I've tried to put it on my master slide, but then the navigation UX is messed up as there is a random button on the slide instead of the player.

Did I see somewhere where someone posted a js method to put it as a link at the top left/right?

Bob O'Donnell

As far as I know, all the button positions are in a "fixed" position. If you want a closed caption button in a certain place you would need to create your own. It also would need to be placed somewhere in the content area.

It might be nice feature if Storyline offered an alternate placement option, like all buttons centered in the middle of the slide. A client asked me about that one time.

Mark Gretzinger

Hi Katie, 

We are stuck using the Classic player because of the accessibility issues outlined in this discussion:

https://community.articulate.com/discussions/articulate-storyline/accessibility-issues-87c09401-055a-461f-b4e3-5fac6772ab84

I know there is going to be an update of the player soon that will include better accessibility. Do you know if it will address those issues, and when the update is scheduled to happen?

Lauren Connelly

Hello Mark!

You're right, our team is hard at work building an accessible player! Based on the gravity of this project, we aren't sharing a timeline yet. The good news is that we are in Beta so we are receiving amazing feedback that will help us reach perfection with the accessible player! Thanks for checking in! You can always see what we are working on here.

Ren Gomez

Hi Mark,

As Lauren mentioned, because of the massive effort in getting the accessible player ready for rollout, we hesitate to share any specific timeline details. Our current plan is to begin releasing those features early next year. As we get closer to release, we'll keep folks posted on any shift in that timing. I hope that helps give you an idea of its priority!

Erich Renken

Hi, all.

I'll share that I needed a better icon for captions than Articulate was providing, so I swapped out the icon myself. If you want to try it, it's a matter of editing the following two files (I'm using the latest version of Storyline 360):

./html5/lib/scripts/frame.mobile.min.js
./html5/lib/scripts/frame.desktop.min.js

Use an HTML editor (I prefer Sublime Text) and search for "M14.8517422,14". You should find one instance of that in each of those files. You'll find that text as part of an SVG path, which is essentially the coordinates for making a vector graphic. You'll need to replace everything in that string (between the double quotation marks) with new coordinates for a CC icon. Here's the path I'm using for the "CC" icon:

"M 1.5 3 C 0.675781 3 0 3.675781 0 4.5 L 0 11.5 C 0 12.324219 0.675781 13 1.5 13 L 13.5 13 C 14.324219 13 15 12.324219 15 11.5 L 15 4.5 C 15 3.675781 14.324219 3 13.5 3 Z M 1.5 4 L 13.5 4 C 13.78125 4 14 4.21875 14 4.5 L 14 11.5 C 14 11.78125 13.78125 12 13.5 12 L 1.5 12 C 1.21875 12 1 11.78125 1 11.5 L 1 4.5 C 1 4.21875 1.21875 4 1.5 4 Z M 5.5 5 C 4.125 5 3 6.125 3 7.5 L 3 8.5 C 3 9.875 4.125 11 5.5 11 L 7 11 L 7 10 L 5.5 10 C 4.664063 10 4 9.335938 4 8.5 L 4 7.5 C 4 6.664063 4.664063 6 5.5 6 L 7 6 L 7 5 Z M 10.5 5 C 9.125 5 8 6.125 8 7.5 L 8 8.5 C 8 9.875 9.125 11 10.5 11 L 12 11 L 12 10 L 10.5 10 C 9.664063 10 9 9.335938 9 8.5 L 9 7.5 C 9 6.664063 9.664063 6 10.5 6 L 12 6 L 12 5 Z"

To be clear, that's replacing this path (the old icon):

"M14.8517422,14 L20.008845,14 C21.1103261,14 22,13.1019465 22,11.9941413 L22,2.00585866 C22,0.897060126 21.1085295,0 20.008845,0 L1.991155,0 C0.889673948,0 0,0.898053512 0,2.00585866 L0,11.9941413 C0,13.1029399 0.891470458,14 1.991155,14 L8.09084766,14 L11.4712949,17.3804472 L14.8517422,14 Z M3,4 L13,4 L13,6 L3,6 L3,4 Z M14,4 L19,4 L19,6 L14,6 L14,4 Z M19,8 L8,8 L8,10 L19,10 L19,8 Z M7,8 L3,8 L3,10 L7,10 L7,8 Z"

I'm attaching a screen cap of the results. Bear in mind, this change happens after the course is published and would need to be applied each time the course is published. The good news is that you don't need to republish the course to apply it.