cgiffard / captionator Goto Github PK

HTML5 polyfill for closed captioning with the <track> element, and implements the WHATWG Timed Text Track specification.

Home Page: captionatorjs.com

JavaScript 99.45% Perl 0.55%

captionator's People

Contributors

Stargazers

Watchers

Forkers

silviapfeiffer abpin anvk dineshkummarc afarkas fluid-project hclberlin wenjenny75 holmes610 richbrill eliooses jccrosby panallen cantemointernal kublaj laguna501 trfiladelfo callumlocke hihihippp jherkenrath rnkvogel imclab brikteknologier mustafakarali netconstructor open-source-gis darkdreamingdan mtco 42jerrykim echalkpad revolunet miranz sivaprasannak jonham aymen-mouelhi manishmore aitolajau georgemck dinhbinh1610 soraiaroo fulfilmyrequest edustack chrisdeely jcarhuazv mike-dev joekuhns zevanrosser kokororin galaxy001 xxxxlr georgeredinger alvinlaipro mohmedsalem19 jtv5 jbelke simonpojok danielsup articulate ayo827 seanpm2001 nabadao

captionator's Issues

WebVTT / SRT Parsing Enhancements

Support is required for:

The proposed WebVTT timestamp syntax from Google (see http://blog.gingertech.net/wp-content/uploads/2011/03/transcript.vtt)
Recognition of Metadata and style blocks in WebVTT
Support for WebVTT defaults
Support for WebVTT comments
Support for WebVTT cue spans

Firefox 21 does not display the Captions

The Subtitles show for Chrome but when using Firefox 21 and this simple HTML below. do not show in Firefox

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <video controls width="640" height="480" >
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        <source src="video.ogv" type="video/ogg">    
        <track src="video.vtt" kind="captions" srclang="en" label="English" />
    </video>
<script type="text/javascript" src="captionator.js"></script>
<script type="text/javascript" >
window.addEventListener("load", function(e) 
{
    captionator.captionify();
});
</script>    
</body>
</html>

The Demo doesn't work in IE9

You just get a tiny box playing the video.

I need to work out a better way to position cues on top of the video. Unfortunately, position absolute seems to be the most reliable solution for the time being, but it breaks in certain cases - such as presentations that slide around, or where the video itself moves.

Options are:

Keep using position: absolute and add more JS for determining when the video itself moves around
Stop using position: absolute in favour of a more robust positioning solution (as yet unknown.)

Ideas welcome!

Implement `addCue` and `removeCue` events _properly_ for TextTrack objects

Currently these functions aren't even written. Scary, huh!?

The git tag for the latest version

Hi @cgiffard ,
The version of the latest version is v0.6. Could you please add git tag for the latest version?
Thank you.

DOMException 12: SYNTAX_ERR: You must use a valid kind when creating a TimedTextTrack

When using Firefox 21 this exception above is thrown for this simple HTML shown below. The Subtitles show for Chrome but do not show in Firefox

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <video controls width="640" height="480" >
         <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        <source src="video.ogv" type="video/ogg">    
        <track src="video.vtt" kind="subtitle" srclang="en" label="English" />
    </video>
<script type="text/javascript" src="captionator.js"></script>
<script type="text/javascript" >
window.addEventListener("load", function(e) 
{
    captionator.captionify();
});
</script>    
</body>

```

Write a parser for TTML

As above!

Fix Japanese/Chinese/Korean line breaking in Vertical Cues

Currently, the vertical cues split based on character. This is a temporary measure - and I'll have to fix it. I probably don't have time to implement this in captioncrunch, but I'll set the milestone on it tentatively.

Update renderer to support advanced WebVTT rendering options

These include class spans, voice spans, and timestamps, as well as cue settings, such as line position, direction, and size.

It'll require a rethinking of the renderer (especially as the renderer has to support other formats as well.)

As part of this update, the ::cue psuedoelement, and the :past and :future psuedoselectors should be supported.

Include QUnit test framework & tests file

Bottom line: Get some tests written and get them testing!

Easy enough. I just need to find the time!

Support audio master elements (as in, caption audio as well as video)

Interesting challenge - where/how to render the captions and other media in this case?

Formally Document Captionator API

As in... in a big list.

Current documentation is written like a chunky walkthrough. Probably not a good reference for people just looking to flick through.

Respect extra cue settings as described by WebVTT

Currently, Captionator reads in, but ignores, most of the cue settings. These are stored against the cue, and parsed according to the specification.

This would require the rethinking of the current parser.

Subtitle text cut off

I'm using Captionator with a copy of the Blender project's Sintel. I've tried variations of SRT and VTT, but Captionator cuts off part of the text with longer text strings. Is this a measure of video control size?

(In addition, is there a way to modify the CSS?)

Language selection missing from demo in Chrome & Firefox

While playing the demo video on a Mac (MacOS X 10.11.1), I noticed the language menu does not
appear in Google Chrome, Firefox or Opera. The language menu does appear in Safari. All browsers were latest versions available at the time I looked at this.

I have attached a screen capture that illustrates this. If it is possible to show the language menu, in the other browsers, then it is not immediately clear.

Check license

I would like to send a pull request to add this library to cdnjs project. I want to check license of this library. It seems like you use BSD 2-Clause license. Is that right?
Thank you.

cdnjs/cdnjs#6176

Support variations on SRT (SUB, SBV, Google Proposed Timestamps)

Support SUB and SBV caption formats in addition to SRT and WebVTT.

Also support Google's proposed WebVTT timestamp syntax: http://blog.gingertech.net/wp-content/uploads/2011/03/transcript.vtt

Subtitles disappear on full-screen mode in Firefox

I noticed that in the demo. Is that related to Captionator?

Support SSA/ASS

Probably by far the most complex subtitle format (and one of the least standardized/documented), but also the most powerful.

Which files need to be hosted

hi @cgiffard
we are cdnjs team, we want to host your project on cdnjs.
But I don't know which files in this repo need to be added, could you help up find out the main files? :)

Not enough Arguments Error

In my implementation as well as the demo I get "Not enough arguments" errors and for the demo a syntax error in the .srt file.

Error: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///index.html :: <TOP_LEVEL> :: line 19" data: no]

Error: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///captionator.js :: <TOP_LEVEL> :: line 804" data: no]

Error: syntax error
Source File: file:///video/arduino-en.srt
Line: 1, Column: 1
Source Code:
1

Write a Tutorial

Seems my documentation might be a bit crappy. A tutorial with screenshots would greatly assist.

Kind attribute omitted

Currently absence of kind attribute cause captionator to throw exception, but according to specs:
if there is no kind attribute, implementation need consider this as 'subtitles' kind.

From specs:
The attribute(kind) may be omitted. The missing value default is the subtitles state.

Externalise & modularise parser, enabling import of alternate parsers into captionator core

Work out a way of creating an extensible parser architecture.

Goals: simple, simple simple.

Ideas:

addParser(myFunctionThatParsesStuff,myFunctionThatTellsCaptionatorMyOtherFunctionCanHandleTheFormat); // My Other Function Is A Porsche

captionator.parser["ttml"] = myParseFunction;

Captionator does not captionate in Firefox 36

I use Captionator's renderer (or the cuechange event if available) to receive notifications from a .vtt file and add the contents of the activecue to the DOM. Everything is working in Chrome (cuechange event) and in IE9(Captionator's renderer), but in Firefox I can't get any of them to work.

In Firefox 36 the following Captionator code returns true
typeof(document.createElement("video").addTextTrack) === "function"

But Firefox does not support the cuechange event either. So I am kind of stuck here.

Now I know that Firefox does not support the cuechange (https://bugzilla.mozilla.org/show_bug.cgi?id=1033144) and that this is not the place to address this issue. But Captionator seems to think that Firefox doesn't need Captionator at all, which imo is not the case.

(I have not tested this in other Firefox versions)

captionify() does not work on more than one video element

If a page has multiple videos with captions, it will only captionify the first one.

Basic styling question

I'm wondering what sort of (CSS) styling options Captionator allows for-- e.g. if I wanted the caption box to span 100% width of the video window, with a semi-transparent white background and padding around the text, would this be possible? Seems native track styling via CSS is rather limited, and I've been looking for a solution for a specific project... Thanks.

Implement animation options

Enable animation of cues (probably through CSS transitions.)

Not to be confused with roll up or karaoke style timed text supported by WebVTT - as this deals specifically with animation, not staged cue delivery.

Javascript Captionator: font size will not adjust

This issue originally appeared as a stackoverflow question (http://stackoverflow.com/q/28901277/170243) - reposting here as problem still exists...

My use case is that I want the captions playing EXTREMELY LARGE over a blank video.

So I've been trying to increase the size of the subtitles according to the documentation using the minimumFontSize directive and a few other attempts, but am finding the font stays stubbornly the same size.

I've boiled the demo video down to the essentials for this question and remain mystified. What am I doing wrong? My code is below and I've put it at (http://projectgrin.org/cap/) so you can see the live thing.

<!DOCTYPE html>
<html> <head> <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/captions.css"/>
    </head>
    <body>
        <video controls autobuffer id="videoTest" width="1010" height="364" >
            <source src="video/arduino.m4v" type="video/mp4" />
            <track kind="subtitles" src="video/arduino-en.vtt" type="text/vtt" srclang="en" label="English Subtitles" default />


        </video>
        <!-- Include Captionator -->
        <script type="text/javascript" src="js/captionator.js"></script>

        <!-- Example Usage -->
        <script type="text/javascript" src="js/captionator-example-api.js"></script>
        <script type="text/javascript">
            window.addEventListener("load",function() {
                    captionator.captionify(null,null,{
minimumFontSize:110, controlHeight:120
});

                var videoObject = document.getElementsByTagName("video")[0];
                videoObject.volume = 0;
                document.body.appendChild(generateMediaControls(videoObject));
            },false);
        </script>
    </body>
</html>

How to use Captionator when browser supports track element (natively but badly)?

Chrome supports <track> elements natively. But not completely, eg, things like L:5% don't work.

Using Captionator, my WebVTT positioning options work correctly in Firefox.

Is there some way to make Captionator work on Chrome too – ie, to prevent Chrome from natively displaying the captions, and let the polyfill do it instead?

Enable use of verbose <source> type markup in MediaTracks

This could be hard, as it runs up against a browser parser bug. Basically the following syntax should be supported:

<track kind="commentary" srclang="en" label="Director's Commentary">
    <source src="audio/commentary.ogg" type="audio/ogg" />
    <source src="audio/commentary.mp3" type="audio/mp3" />
    <source src="audio/commentary.wav" type="audio/wav" />
</track>

At the moment the elements appear outside of the track, meaning they can't be associated with it (negating the whole point of marking the document up like this!)

I do think this syntax should be supported. _It makes sense._

Synchronised media is nice, (and already supported, I might add!) but semantically it seems a little off. An assistive/media enhancement track shouldn't appear separately to a media element, since it is hierarchically a descendant of that element. Additionally, it clutters up the page, adding unintended meaning and distraction to users uninterested in assistance or additional media features. Synchronised media doesn't degrade nicely in browsers not capable of associating it with the syncMaster - but assistive and enhancement tracks are nicely hidden from those agents with the syntax above. (Then you can make them work with Captionator!)

This is a parsing problem which may require re-downloading the whole page (painful, and runs into edge cases, especially where the page might have been originally requested using POST, or as part of a one-time-only user action.)

If it's somehow possible to easily extract the raw text, or work out which orphaned <source> elements are associated with the parent <track>, then that's the method we want to attack.

Write more demo material

More demo material for showing alternative use cases of the API would be nice.

Strict Mode error in IE10

Finding IE 10 is throwing the following error:

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode
captionator.js, line 920 character 6

That particular error message is taken from your demo page.

All lines of captions not seen

Hi,
I'm testing captionator and got it running, except the sub tiltes are not managed until the third one (nothing happens in the DOM for the 1st and second captions....

here's one of the very basic srt file:
WEBVTT

1
00:00:0,500 --> 00:00:5,951
This is a simple example
for srt captions

2
00:00:7,166 --> 00:00:15,883
Simply use a srt-file and append:
<a href="file.srt" class="track" data-enabled="true">My srt file</a>

3
00:00:16,000 --> 00:00:18,962
... to your media element

4
00:00:21,999 --> 00:00:24,368
There are more options, we will explain soon.

5
00:00:24,999 --> 00:00:31,368
Try to be accessible and nice to your users :-)

Thank you

Include compatibility with the in-development JS TimedTextTrack API

Described by this WHATWG Document.

Seek to text

This maybe out of scope for the project, but it would be amazing to support links in the transcription text to the corresponding points in the video. See http://www.subply.com/en/Products/InterActiveTranscript.htm as an example. My use case is incorporating transcription text into site-wide search and resolving the search to the appropriate point in the video.

Just to clarify, it's not clear to me if the API supports this use case easily.

Improper space when aligning horizontal captions against vertical-lr captions

As above, there's a space which shouldn't be there. Hopefully pretty easy to fix.

Fix BCP-47 language string parsing

Currently Captionator uses a fairly hacky method of parsing the string, and disregards a lot of the data that a moderately verbose BCP-47 language string can provide.

track src must be local

This is a bit of a corner case but I'll file it for tracking.
I've uploaded srt file to Google Storage (http://code.google.com/apis/storage/) and tried to use it with Captionator.
track src="http://commondatastorage.googleapis.com/jarek-test-video/test-google-io-video.srt" type="text/srt" kind="captions" srclang="zh-CN"
Captionator was not able to fetch the srt, using the file local to my embed worked.

Caption cues don't render in custom element as expected

I'm using the appendCueCanvasTo option parameter in order to render the captions there. But it's just rendering to default upper-left position. My init JS:

var videoCaptions = document.getElementById('videoCaptions');
captionator.captionify(null,null,{
    "appendCueCanvasTo": "videoCaptions"
    }
);

captionator.captionify(video, "en", {});
video.textTracks[0].mode = 'hidden'

The tracks still appear. This works fine in Chrome (which has native WebVTT support).

Allow dynamic re-enabling and disabling of subtitles

As above.

Trying to set a read only property

In https://github.com/cgiffard/Captionator/blob/master/source/captionator.general.processvideoelement.js#L57 you try to set an otherwise readonly property which causes the initialization to fail and subsequently no captions will be displayed at all.