cgiffard / captionator Goto Github PK
View Code? Open in Web Editor NEWHTML5 polyfill for closed captioning with the <track> element, and implements the WHATWG Timed Text Track specification.
Home Page: captionatorjs.com
HTML5 polyfill for closed captioning with the <track> element, and implements the WHATWG Timed Text Track specification.
Home Page: captionatorjs.com
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>
captionator.captionify(video, "en", {});
video.textTracks[0].mode = 'hidden'
The tracks still appear. This works fine in Chrome (which has native WebVTT support).
As Above!
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;
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.
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.
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.
Write a function that can replace Captionator's internal cue renderer. Pass it to Captionator. Captionator uses it instead! Yay!
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.
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"
}
);
More demo material for showing alternative use cases of the API would be nice.
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
As above!
If a page has multiple videos with captions, it will only captionify the first one.
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.
Bottom line: Get some tests written and get them testing!
Easy enough. I just need to find the time!
Seems my documentation might be a bit crappy. A tutorial with screenshots would greatly assist.
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
Described by this WHATWG Document.
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.
Interesting challenge - where/how to render the captions and other media in this case?
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.
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>
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
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.
You just get a tiny box playing the video.
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.
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>
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)
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.
Probably by far the most complex subtitle format (and one of the least standardized/documented), but also the most powerful.
I noticed that in the demo. Is that related to Captionator?
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.
Support is required for:
Currently these functions aren't even written. Scary, huh!?
As above.
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?)
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:
position: absolute
and add more JS for determining when the video itself moves aroundposition: absolute
in favour of a more robust positioning solution (as yet unknown.)Ideas welcome!
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.
Hi @cgiffard ,
The version of the latest version is v0.6. Could you please add git tag for the latest version?
Thank you.
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
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.
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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.