Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Adding Closed Captions to JW 5.3 and HTML 5 Player

54 replies [Last post]
Reply

Hi all,

The code below does exactly what we need it to for our organization except for closed-cpationing of the content. Does anyone know how I can add a closed-captioning parameter to the code below? I looked at the closed-captioning add-on here on the longtail site, but that only appears to work with the swfObject code. Thanks in advance.

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>HTML5_VIDEO_TEST</title> 
<script type="text/javascript" src="jwplayer.js"></script>
</head> 
<body> 
<div id="container">Loading the player ...</div>
<script type="text/javascript">
jwplayer("container").setup({
flashplayer: "player.swf",
file: "LEO.mp4",
height: 270,
width: 480
});
</script>
Reply

Under:

flashplayer: "player.swf",

Add:

plugins: "captions-1",
'captions.file': "file.xml",

Reply

Hi Ethan,

Thanks for the instructions. I ended up getting it to work based on the example provided for the HD plug-in with the following code, which is very similar, but a little different from the code you have above:

plugins: {
captions: { file: "captions.xml", state: "false" }
}

I'm really loving all of the JW 5.3 and HTML 5 Player's features, but it seems some of the documentation on this site has not yet been updated to reflect this latest version of the player. Or in some cases, exact code samples are not always provided for each plug-in.

When issues like syntax, formatting and specific punctuation like commas and so forth are so critical in getting these things to work, it seems that extra care would be taken to ensure all examples are up-to-date, exact and have been tested to work. I don't mean this as a knock on you guys at all (as I said, I think your product is tops!), but it may help alleviate your having to answer so many questions in the support forums and clear up confusion on the part of end-users, particularly non-developers. My guess is that the easier it is to use your products, the number of people that opt to use them will be correspondingly be higher as well. After all, who doesn't like easy?

Reply

Am I correct in assuming that the caption plugin works with the flashplayer only? Is there a way to make closed captioning work with the HTML5 player?

Reply

@Rick - Glad you got it working! Thanks for the feedback.

@claytonk - Yes, the plugin is Flash only.

Reply

I think it is important that there is like for like functionality for the flash and html5 player. Captions essential. However, otehr features of flash are missing and important bitrate switching, encryption etc.

Please can we have captions and separate audio.

Reply

@td - The Audiodescription plugin will let you do this - http://www.longtailvideo.com/addons/plugins/85/Audiodescription?q=

Reply

thanks, will this do captions as well as audio?

Reply

I think there's a bit of a misunderstanding here:

*) Our Captions plugin indeed does closed captioning. It is Flash-only for now. An HTML5 version is in the works (td, can you tell which captioning format you use?)

*) Our Audiodescription plugin does the audio. It can be combined with the Captions plugin so the player does both. It is Flash for now, and an HTML5 version is not currently being developed. It probably will at a later stage, but captions are up first

Reply

We use captions as a base for our website www.filmixy.pl, so captions for HTML5 version is very much needed as iphone users can't see any of our users captions.

I dont know a name but our format is:

<body><div xml:id='captions'>
<p begin="0:00" end="0:03">Szefie, melduję, że wiemy, gdzie znaleźć odpowiedź.</p>
<p begin="0:03" end="0:06">Znaleźliśmy stolicę Niemiec: to gdzieś... tutaj!</p>
<p begin="0:07" end="0:10">Wciąż jednak nie wiemy jak się ona nazywa..</p>
Reply

That's the TimedText format. Thanks!

Reply

Sorry Jeroen, we user TTC. They work perfectly in the flash player (along with separate MP3). However, they do not work for HTML5 (movies format m4v). So, at the moment, am I right in saying no captions still for HTML5 player?

Reply

Yes, a javascript version of the captions plugin is not built yet. We have this scheduled, but not sure when this will be coming.

Reply

I hope you will be able to finish it Soon ...

I just create a "crossbrowser" html5 Player ... and our requirement is to have a close captions under our videos ...

Will keep this page in bookmark to follow your developpement.

Good job by the way with the player ... i love it!

Reply

I'm also looking forward to HTML5 captions.

Also, would you consider either adding support for multiple CC tracks embedded in the MP4 file or a switch to turn off MP4 embedded captions?

I use my MP4s for both the JW Flash Player and iOS and they contain both English and Spanish captions which users can select in iOS devices. However, using the JW Captions plug-in, it reads in the embedded MP4 captions even if I've specified an external XML file. It would be better if it ignored the embedded captions if you specify an external XML caption file.

And even better than that would be if you could select the caption language via the JW Captions plugin like you can in iOS.

Reply

I'm working on exactly that - a multitrack update of the captions plugin that includes support for multiple inline languages:

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

As to HTML5 support, what caption format should the player be able to parse? I was thinking of just supporting SRT to get started. MP4 inline will work on iOS of course, but not on other HTML5 devices. And DFXP/TTML?

Reply

For my self i still use the TTML.

Reply

I use SRT in Handbrake for getting the captions embedded into the MP4 files. But I've been using DFXP with the JW Captions plug-in. I had to buy MovieCaptioner so I can convert to and from all the major formats.

Reply

hi

related question... is captions plugin available for the JW player for silverlight ?

Reply

No plugins are available for Silverlight.

Reply

It seems to me that supporting embedded MP4 Text Tracks for the embedded, and DFXP for external files would be good coverage.

Sure would like to see Flash and HTML 5 support for both captions and audio description. And support for MP3 and AAC for audio description tracks. And, finally, support for embedded description tracks. I realize there are Flash issues with the last.

Reply

We do not have any plugins for the Siverlight player, though.

Reply

wondering about the CC for html5 - was "in the works" in feb? what is the situation now. It simply will make it or break it for me if I use this platform or not

Reply

It is still being developed.

Reply

Can I have the html 5 caption development source code..
Best,
Imesh

Reply

Hi, I purchased the Captions 10-Pack, and the plugin works in development (localhost), however it DOES NOT work in production. I need instructions for this to get solved please.!

Reply

@Imesh - It is not available yet.

@Allan - Provide a link?

Reply

Captions doesn't appear to correctly implement the full timeExpression spec of the DXFP standard (http://www.w3.org/TR/2010/PR-ttaf1-dfxp-20100914/#timing-value-timeExpression).

I have a back catalog of videos with close caption files where the start and end times are expressed in the hh:mm:ss:ff format, that is, using frames rather than fractions of seconds.

For example, the following caption

  <p begin="00:00:01:06" end="00:00:03:15">Gravity is one of the fundamental <br /> forces of the Universe.</p>

is rendered at 1 minute and 6 seconds, rather than 1 second frame 6. And it stays up until 3 min 15 sec.

Am I missing some parameter that tells Captions what timeExpression format to use?

Reply

The fraction part is indeed not supported by the plugin at present. I'll look into adding this:

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

Reply

Actually, it's just the opposite, sorry if I wasn't clear.
The fractional-second format (hh:mm:ss.fraction) IS working. The following works fine:

<!-- Works fine: -->
<p begin="00:00:01.2" end="00:00:03.5">Gravity is one of the fundamental <br /> forces of the Universe.</p>

What does not work is the frame format (hh:mm:ss:ff):

<!-- Doesn't work: -->
<p begin="00:00:01:06" end="00:00:03:15">Gravity is one of the fundamental <br /> forces of the Universe.</p>

Thanks!

Reply

Ah, of course. It's frames instead of fractions...

Reply

Are you considering WebVTT support in development plan?

Reply

We're keeping an eye on it. At present, WebVTT is still work in progress.

Reply

WebVTT is very much more than a work in progress. Im surprised you and other video player vendors have ignored it for so long.

Reply

No browser currently supports it, so it feels like some work needs done still.

We're not ignoring it, but cannot confuse our customers with solutions that don't work yet.

Reply

@Jeroen

Great! Thanks for considering WebVTT support:

ticket/1422

Reply

@Steve: supporting the hh:mm:ss:ff format is problematic, b/c we often don't know the framerate of the video. The player then has to guess the video is e.g. 30fps.

Isn't there a way to swiftly convert your existing DFXP files to using fractions instead of frames? If not, is 30fps a good guess?

Reply

Should't videoframerate be available in the video metadata? Or, could we say that, if videoframerate is available in the video metadata, then the hh:mm:ss:ff format should work. Then it's my responsibility to be sure that, if I want to use that format, my videos had better have that metadata.

Actually, 29.97002997002997 is a better guess, but 30fps could do it.

thanks!

Reply

I'll take a look at using 30fps by default, and the framerate if provided by the video (Flash doesn't expose it for all videos).

Reply

Is this format supported? I do not see any examples like this in the site, and all of my existing TTAF1 are formatted this way. It is also part of the spec. Thanks.

<tt xmlns="http://www.w3.org/2006/10/ttaf1">
  <body>
    <div>
      <p begin="8s" end="10s">- Nothing is going on.</p>
      <p begin="10.5s" end="12.5s">You liar!</p>
      <p begin="13.5s" end="15s">Are you?</p>
      <p begin="17s" end="20s">Violet, please!<br/>- I am not your babe!</p>
      <p begin="24s" end="29s">You stupid cow,<br/>look what you gone and done now, ay.</p>
      <p begin="34s" end="36s">Vi, please.<br/>- Leave me alone!</p>
      <p begin="36s" end="00:00:38.5">- We need to talk.<br/>- Jason, are you deaf?!</p>
      <p begin="41s" end="42.9s">What's going on?</p>
      <p begin="43s" end="45s">Get out there and try to salvage this!</p>
    </div>
  </body>
</tt>
Reply

This is supported, see here for an example:

http://www.longtailvideo.com/support/addons/captions-plugin/15017/

Reply

The examples do not show the "s" being used. My TTAF1 are not working with JW and before I recode for compatibility for JW I need to know if it is or is not compatible with this format. My TTAF1's work with Flowplayer and we use both licensed players in our site and need captions working on both.

<p begin="17s" end="20s">
Reply

Ah, I see. This should be trivial to fix in the plugin though. I can update this for a next release of the plugin (in ~4 weeks?) so you won't have to convert your captions?

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

Reply

Thank you, I will plan for it, and continue our development with the JW player on this. Thank you.

Reply

I have just upgraded to v5, and the xml format I have used for years with v3 no longer works. We have loads of these CC files and rewriting them all will be, well...

Is there any chance you could make this format work when you update the plugin? It would be really appreciated!

<tt xml:lang="en" xmlns="http://www.w3.org/2006/10/ttaf1" xmlns:tts="http://www.w3.org/2006/10/ttaf1#style">
<head>
<layout />
</head>
<body>
<div xml:id="captions">

<div begin="0" end="20.6">
<p align="center"><font size='Normal' >Excellent condensation is the key to easy carving of amalgam.</font></p>
</div>
<div begin="20.6" end="54.3">
<p align="center"><font size='Normal' >Excess (mercury rich) amalgam is removed, to level the amalgam with the cavity margins.</font></p>
</div>
<div begin="54.3" end="85.9">
<p align="center"><font size='Normal' >The proximal walls are defined with a probe.</font></p>
</div>
<div begin="85.9" end="134.4">
<p align="center"><font size='Normal' >The matrix band is removed. This matrix system uses a purpose-made cutter.</font></p>
</div>
<div begin="134.4" end="170.4">
<p align="center"><font size='Normal' >The proximal restoration margins are shaped with a Hollenbach carver.</font></p>
</div>
<div begin="170.4" end="180.7">
<p align="center"><font size='Normal' >The round end of a Wards Carver is now used to ensure the marginal ridges are the correct height</font></p>
</div>
<div begin="180.7" end="193.9">
<p align="center"><font size='Normal' >and the amalgam is not overlapping the occlusal outline of the cavity.</font></p>
</div>
<div begin="193.9" end="295.1">
<p align="center"><font size='Normal' >Next use the Frahms carver to cut the fissure pattern and cusp slopes,</font></p>
</div>
<div begin="295.1" end="331.9">
<p align="center"><font size='Normal' >The marginal fossae are created with the Frahms carver</font></p>
</div>
<div begin="331.9" end="444.8">
<p align="center"><font size='Normal' >Refinement of the shape is being done with a Hollenbach carver and a spoon excavator</font></p>
</div>
<div begin="444.8" end="10:00:00">
<p align="center"><font size='Normal' >You may have gathered by now that Louis is a perfectionist...</font></p>
</div>

</div>
</body>
</tt>

Reply

You can continue using this setup if you set the option "plugins=captions-1". This will load the old version of the captions plugin.

In time, you should look into updating all your captions files (preferably with a script of course), since this setup is actually not correct. DFXP files need one <div> with multiple <p begin="" end=""> elements inside them.

That wrong format was an error on my side, we've been advertising it for a while back then until we found out...

Reply

Hi there,

I'm having trouble getting back=true to work using .srt captions-2 (with flv files). I fail making it work on both IE and other browsers.

If I use JW Embedder I can make "back=true" work as expected on Firefox/Opera etc), but not on IE. And Object & Embed back=true doesn't work at all (with .srt & .flv).

Is the any solution which makes .srt subtitles display with black background on both IE and other brosers?

Best regards,
// Rolf L

I use JW Player 5.8(.2011). The last code I tried looks like this:

<!--

<object
id="flashvideo"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="758"
height="460">
<param name="FlashVars" value="file=00-Test.flv&plugins=captions-2&autostart=false&rotatetime=3&captions.file=00-Test.srt&back=true" />
<param name="movie" value="player.swf" />
<param name="wmode" value="window" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<param name="allowfullscreen" value="true" />

<embed name="flashvideo"
src="player.swf"
wmode="window"
allowScriptAccess="always"
allowfullscreen="true"
quality="high"
flashvars="file=00-Test.flv&plugins=captions-2&autostart=false&rotatetime=3&captions.file=00-Test.srt&back=true"
width="758"
height="460"
>
</embed>
</object>

-->

Reply

On the fix in "(in ~4 weeks?)", is see that the Ticket #1396 (closed enhancement: invalid). So will this format not be supported?

<p begin="17s" end="20s">

Reply

@Franklin: I'm sorry, that ticket should not have been closed. I investigated support for fractions, then saw that Adobe/Microsoft don't support it and closed the entire ticket. The "s" part of this is still valid, and I'll add that to the plugin.

@Rolf: you have to call it "captions.back" when using SWFObject or object/embed codes.

Reply

@Franklin this part was already fixed, but it was fixed in the player instead of in the plugin. If you update your player version, the seconds part will show.

To ensure these conflicts don't arise anymore, I have also updated the plugin to not "re-use" this code from the player. This fix should go live in a few weeks. Here's already an example setup, including the SRT file:

http://developer.longtailvideo.com/player/plugins/captions/test/offsets.html
http://developer.longtailvideo.com/player/plugins/captions/test/assets/corrie-offsets.xml

Reply

Any updates on closed captioning for the HTML5 player?

Reply

Closed captioning in HTML5 has been working for a while, using the SRT format.

Reply

JeroenW,

Awesome!!! Where can I find examples? Just want to make sure I am in the right place on your site.

Thank you,
Michael

Reply

One other question. Now that HTML5 works with SRT format in browsers...will the captions work on mobile devices like iPad, iPhone or iPod Touch? If not, do I embedded them into the MP4 file using handbreak...etc. and use the plugin with the SRT format. Will that work? Hope this makes sense.

mz

Reply

Here's the guide, plus several examples:

http://www.longtailvideo.com/support/addons

SRT captions do not yet work on iOS. You can indeed use MP4 captions to do support iOS + Flash, or use MP4 + SRT to support iOS + HTML5 desktops. The captions reference guide has more info.

Post new comment

  • Allowed HTML tags: <code> <blockquote> <em> <strong> <strike> <ul> <li> <ol>
  • You may post code using <code>...</code> .
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options