Customizing Captions (position and background color)

11 replies [Last post]

Posted: Wed, 2011-11-30 15:35 Bill D

I'm using version 5.8 Pro of JWPlayer and have captions working using an mp4 file encoded with CC text. The CC works in all browsers and on my iPad. Now I need to tweak a few things to suit my needs.

First I need to position the CC text closer to the bottom of the video frame (I have a blank area in the video file just for the CC text because I don't want the CC text on top of the video). I do understand this can't be helped in iOS, but I'd like to in normal browsers. I tried using the listener function to style the CC as outlined here: http://www.longtailvideo.com/support/forums/addons/using-plugins/4264/accessibility-plug-in-and-java..., but the Captions plugin apparently doesn't support it.

Second,I'd like to change the background color of the CC text to something besides black. The Captions plugin supports a font color change, but not the "glow" color behind it. The CC text area I have designated for CC is a light color, so I'd like dark text with either no background color or a light color.

If this is not something that's not supported by JWPlayer or Captions, how can I get this done? Can I have a custom captions plugin edited just for me (who can do this)?

FYI, here's the code I'm using:

<div id="container">Loading the player ...</div> 
			<script type="text/javascript"> 
				jwplayer("container").setup({ 
					'flashplayer': 'player.swf', 
					'position' : 'top',
					'screencolor' : 'FFFFFF',
					'file': 'CommPrepCaptioned.mp4', 
					'autostart': 'true',
					'controlbar': 'bottom',
					'image': 'CommPrepTitle.jpg',
					'bufferlength': '20',
					'width': '480',
					'height': '534', 
					'plugins': {
						'captions-2': {
							'state':true, 
							'fontSize': '12', 
							'color': '#000000'
						}
					}
				}); 	
			</script>

Here is a sample of what I have so far.
http://www.humtech.com/4Bill/sample1/CP0101090a.htm

Posted: Thu, 2011-12-01 08:47 JeroenW

Both options are indeed not possible with the Captions plugin yet. Positioning the captions is hard to support (not in the DFXP spec), but the ability to change the outline/background color is something I'm looking at:

http://developer.longtailvideo.com/trac/ticket/1529

If you want to change the position and/or color right away, you can look into creating a custom version of the captions plugin. It's open source:

http://developer.longtailvideo.com/trac/browser/plugins/captions

Someone with a little ActionScript (or JavaScript) experience will be able to edit the plugin. The code is documented and should be fairly easy to read/edit.

Posted: Thu, 2011-12-01 16:21 Bill D

JeroenW,

I'm trying to follow your advice. I have the Flex SDK installed, I have the free plugin SDK that has the dockableskinnableplugin and player5plugin samples. I downloaded the source for the captions plugin and installed it in the same directory structure as the two samples. The two samples came with build.bat files which I'm trying to edit to fit the captions plugin needs, but every time I run the build.bat it errors and tells me it can't find the library.

I even tried to remove the references to the relative paths to something like:

SET FLEXPATH="C:Program Filesflex_sdk_3"
%FLEXPATH%binmxmlc G:sdksfl5-plugin-sdkpluginscaptionssrcascomlongtailvideopluginscaptionsCaptions.as -sp . -o .captions.swf -library-path+=G:sdksfl5-plugin-sdklib -load-externs G:sdksfl5-plugin-sdklibjwplayer-5-classes.xml -use-network=false

I get an error that says "A file found in a source-path must have the same package structure '', as the definition's package, 'com.longtailvideo.plugins.captions'"

I could use a bit of help with the compiling of the plugin. FYI, when I run the build.bat for the two samples, I get errors there two.

If anyone would like to make a bit of extra cash for working on this, let me know.

BTW, I found an undocumented setting for aligning the text instead of just having it centered.

'captions-2': {
	'state':true, 
	'textAlign': 'left', 
	'fontSize': '12', 
	'color': '#ffffff'
	}

Posted: Fri, 2011-12-02 08:31 JeroenW

A build.bat file with the following contents in my "captions/build" folder works for me:

SET FLEXPATH="Program Filesflex_sdk_3"
echo "Compiling plugin..."
%FLEXPATH%binmxmlc $FLEXPATH/bin/mxmlc  ../src/as/com/longtailvideo/plugins/captions/Captions.as -sp ../src/as -o ../captions.swf -library-path+=../lib -load-externs=../lib/jwplayer-5-classes.xml -use-network=false

Posted: Fri, 2011-12-02 09:33 Ajvngou

When i got fullscreen, subtitles are still small. How make it bigger?

i am using this code:

Posted: Mon, 2011-12-05 04:58 JeroenW

What do you mean with "small"? Can you share a screenshot?

In fullscreen, the subs are indeed slightly smaller than in normal screen. The plugin has a function that makes the subs span 100% of the video when 400px wide, shrinking that as the screen becomes larger (to ~60% @ 1920px). It's in the resize() function of the plugin.

Posted: Mon, 2011-12-05 08:46 Bill D

JeroenW,

That batch code didn't work for me. I keep getting an error:

unable to open '../lib/jwplayer-5-classes.xml'

The xml file is there, not sure what the issue could be. It sure would help if you could zip up the whole captions/ folder for me. I also think some characters got removed when you pasted them into this forum, SET FLEXPATH="Program Filesflex_sdk_3" can't be right. Again, I'd be willing to pay you for your time. I REALLY need to get the captions modified and displayed the way I need.

I'd like to talk more about hiring you to help me out here. Please email me at billdane@hotmail.com about this.

Posted: Tue, 2011-12-06 06:26 JeroenW

I added the batch scripts to the source code of the plugin. You can simply download all through the small "zip" link at the bottom of the page:

http://developer.longtailvideo.com/trac/browser/plugins/captions

I'm afraid I don't have time to do consulting work though...

Posted: Wed, 2011-12-14 08:32 Bill D

JeroenW, I downloaded the zip file and ran the build.bat file at a CMD prompt and still get the unable to open '../lib/jwplayer-5-classes.xml' error. I can't imagine what I'm doing wrong.

I really need to get this going and am willing to significantly support you on this ($$).

Are you sure you don't have an hour or so to help me out and make some extra Christmas cash?

Posted: Thu, 2011-12-15 06:04 JeroenW

Sent you an email ...

No Cristmas cash is needed, but spread the word on JW Player ;).

Posted: Sat, 2012-01-28 00:59 Valera Meylis

Hello there - I would love to see a new Captions plugin with the font-color, font-size and the background to be modifiable via variables without the need to re-compile everything - I decided to become a paying user, and stop being a coder :)

And, being a paying customer, I will buy the plugin! :)

Come on, Jeroen - you can do ANYTHING, you know that! :)

Posted: Mon, 2012-01-30 06:37 JeroenW

The color an fontSize are already set-able in the plugin. I'll look into adding an option for the background.

Customizing Captions (position and background color)

Post new comment

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company