Skip to content
Browse files

Initial port of MooTools version

  • Loading branch information...
0 parents commit b22493480ce4920180622adb4f5bf6b50cda897e @makenosound makenosound committed Nov 30, 2010
Showing with 161 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. +39 −0 README.md
  3. +112 −0 jquery.videosub.js
  4. +8 −0 jquery.videosub.min.js
2 .gitignore
@@ -0,0 +1,2 @@
+.Apple
+.DS_Store
39 README.md
@@ -0,0 +1,39 @@
+# VideoSub v0.9.5 #
+
+Standards compliant video subtitles for HTML5 video tags. Original MooTools implementation by [Thomas Sturm](http://www.storiesinflight.com/js_videosub/), jQuery port by [Max Wheeler](http://www.icelab.com.au).
+
+## Usage ##
+
+Dead simple. Call the `videoSub()` function on any jQuery collection of video elements. This will probably look something like:
+
+ $('video').videoSub();
+
+Doing the following will parse the `<video>` elements you've specified and look for a `<track>` element. Your HTML should look something like the following:
+
+ <video>
+ <source src="/path/to/movie.mp4" type="video/mp4">
+ <source src="/path/to/movie.ogg" type="video/ogg">
+ <track src="/path/to/movie.srt" kind="subtitle" srclang="en-au" label="English">
+ </video>
+
+If there is a `<track>` subtitle, it will load and parse the subtitle file (SRT or WebSRT standard) and display the subtitles over the playing video. Should your browser already support `<track>` tags, VideoSub will feature detect and hide silently.
+
+### Options ###
+
+There are some basic options/defaults you can override for now:
+
+ $('video').videoSub({
+ containerClass: 'videosub-container',
+ barClass: 'videosub-bar',
+ useBarDefaultStyle: true
+ });
+
+By default, some simple styling is applied to the subtitles. You can remove them by setting `useBarDefaultStyle` to `false` and do all your styling via CSS instead.
+
+## Changelog ##
+
+**0.9.5**: Initial jQuery release
+
+## Copyright & License ##
+
+VideoSub is freeware. Attribution appreciated for both Thomas Sturm and Max Wheeler.
112 jquery.videosub.js
@@ -0,0 +1,112 @@
+/* ------------------------------------------------------------------------------
+ VideoSub v0.9.5
+
+ Original MooTools implementation by [Thomas Sturm](http://www.storiesinflight.com)
+ jQuery port by [Max Wheeler](http://www.icelab.com.au)
+ Freeware, Attribution Appreciated
+ ------------------------------------------------------------------------------ */
+
+(function($) {
+ var tcsecs, timecode_max, timecode_min;
+ $.fn.videoSub = function(options) {
+ var _a, opts;
+ if (typeof (typeof (_a = $('<video>').addtrack) !== "undefined" && _a !== null)) {
+ opts = $.extend({}, $.fn.videoSub.defaults, options);
+ return this.each(function() {
+ var $this, _a, bar, container, el, o, src;
+ el = this;
+ $this = $(this);
+ o = (typeof (_a = $.meta) !== "undefined" && _a !== null) ? $.extend(opts, $this.data()) : opts;
+ src = $('track', this).attr('src');
+ if (typeof src !== "undefined" && src !== null) {
+ container = $('<div class="' + o.containerClass + '">');
+ container.css('position', 'relative');
+ container = $this.wrap(container).parent();
+ bar = $('<div class="' + o.barClass + '">');
+ bar.css('width', $this.outerWidth() - 40);
+ if (o.useBarDefaultStyle) {
+ bar.css({
+ 'position': 'absolute',
+ 'bottom': '40px',
+ 'padding': '0 25px',
+ 'text-align': 'center',
+ 'color': '#ffffff',
+ 'font-family': 'Helvetica, Arial, sans-serif',
+ 'font-size': '16px',
+ 'font-weight': 'bold',
+ 'text-shadow': '#000000 1px 1px 0px'
+ });
+ }
+ bar = bar.appendTo(container);
+ el.subtitles = [];
+ el.subcount = 0;
+ el.update = function(req) {
+ var r, records;
+ records = req.split('\n\n');
+ r = 0;
+ $(records).each(function(i) {
+ el.subtitles[r] = [];
+ return (el.subtitles[r++] = records[i].split('\n'));
+ });
+ $this.bind('play', function(e) {
+ return (el.subcount = 0);
+ });
+ $this.bind('ended', function(e) {
+ return (el.subcount = 0);
+ });
+ $this.bind('seeked', function(e) {
+ var _b;
+ el.subcount = 0;
+ _b = [];
+ while (timecode_max(el.subtitles[el.subcount][1]) < this.currentTime.toFixed(1)) {
+ el.subcount++;
+ if (el.subcount > el.subtitles.length - 1) {
+ el.subcount = el.subtitles.length - 1;
+ break;
+ }
+ }
+ return _b;
+ });
+ return $this.bind('timeupdate', function(e) {
+ var subtitle;
+ subtitle = '';
+ if (el.currentTime.toFixed(1) > timecode_min(el.subtitles[el.subcount][1]) && el.currentTime.toFixed(1) < timecode_max(el.subtitles[el.subcount][1])) {
+ subtitle = el.subtitles[el.subcount][2];
+ }
+ if (el.currentTime.toFixed(1) > timecode_max(el.subtitles[el.subcount][1]) && el.subcount < (el.subtitles.length - 1)) {
+ el.subcount++;
+ }
+ return bar.html(subtitle);
+ });
+ };
+ return $.ajax({
+ method: 'get',
+ url: src,
+ success: el.update
+ });
+ }
+ });
+ }
+ };
+ timecode_min = function(tc) {
+ var tcpair;
+ tcpair = tc.split(' --> ');
+ return tcsecs(tcpair[0]);
+ };
+ timecode_max = function(tc) {
+ var tcpair;
+ tcpair = tc.split(' --> ');
+ return tcsecs(tcpair[1]);
+ };
+ tcsecs = function(tc) {
+ var secs, tc1, tc2;
+ tc1 = tc.split(',');
+ tc2 = tc1[0].split(':');
+ return (secs = Math.floor(tc2[0] * 60 * 60) + Math.floor(tc2[1] * 60) + Math.floor(tc2[2]));
+ };
+ $.fn.videoSub.defaults = {
+ containerClass: 'videosub-container',
+ barClass: 'videosub-bar',
+ useBarDefaultStyle: true
+ };
+})(jQuery);
8 jquery.videosub.min.js
@@ -0,0 +1,8 @@
+/* ------------------------------------------------------------------------------
+ VideoSub v0.9.5
+
+ Original MooTools implementation by [Thomas Sturm](http://www.storiesinflight.com)
+ jQuery port by [Max Wheeler](http://www.icelab.com.au)
+ Freeware, attribution appreciated
+ ------------------------------------------------------------------------------ */
+(function(c){var a,b,d;c.fn.videoSub=function(e){var f,g;if(typeof(typeof(f=c("<video>").addtrack)!=="undefined"&&f!==null)){g=c.extend({},c.fn.videoSub.defaults,e);return this.each(function(){var l,i,k,h,j,n,m;j=this;l=c(this);n=(typeof(i=c.meta)!=="undefined"&&i!==null)?c.extend(g,l.data()):g;m=c("track",this).attr("src");if(typeof m!=="undefined"&&m!==null){h=c('<div class="'+n.containerClass+'">');h.css("position","relative");h=l.wrap(h).parent();k=c('<div class="'+n.barClass+'">');k.css("width",l.outerWidth()-40);if(n.useBarDefaultStyle){k.css({position:"absolute",bottom:"40px",padding:"0 25px","text-align":"center",color:"#ffffff","font-family":"Helvetica, Arial, sans-serif","font-size":"16px","font-weight":"bold","text-shadow":"#000000 1px 1px 0px"})}k=k.appendTo(h);j.subtitles=[];j.subcount=0;j.update=function(q){var p,o;o=q.split("\n\n");p=0;c(o).each(function(r){j.subtitles[p]=[];return(j.subtitles[p++]=o[r].split("\n"))});l.bind("play",function(r){return(j.subcount=0)});l.bind("ended",function(r){return(j.subcount=0)});l.bind("seeked",function(s){var r;j.subcount=0;r=[];while(b(j.subtitles[j.subcount][1])<this.currentTime.toFixed(1)){j.subcount++;if(j.subcount>j.subtitles.length-1){j.subcount=j.subtitles.length-1;break}}return r});return l.bind("timeupdate",function(s){var r;r="";if(j.currentTime.toFixed(1)>d(j.subtitles[j.subcount][1])&&j.currentTime.toFixed(1)<b(j.subtitles[j.subcount][1])){r=j.subtitles[j.subcount][2]}if(j.currentTime.toFixed(1)>b(j.subtitles[j.subcount][1])&&j.subcount<(j.subtitles.length-1)){j.subcount++}return k.html(r)})};return c.ajax({method:"get",url:m,success:j.update})}})}};d=function(e){var f;f=e.split(" --> ");return a(f[0])};b=function(e){var f;f=e.split(" --> ");return a(f[1])};a=function(e){var h,g,f;g=e.split(",");f=g[0].split(":");return(h=Math.floor(f[0]*60*60)+Math.floor(f[1]*60)+Math.floor(f[2]))};c.fn.videoSub.defaults={containerClass:"videosub-container",barClass:"videosub-bar",useBarDefaultStyle:true}})(jQuery);

0 comments on commit b224934

Please sign in to comment.
Something went wrong with that request. Please try again.