mep_feature_time_rail_thumbnails 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 581863f9c3305a8e58bab3fd847f0ca4749057ab
+  data.tar.gz: 805a293d56f27f0331601cddb794444564212403
+SHA512:
+  metadata.gz: e0ad1312a6e0028608934e253ca0e065fc72e7a36cdeaa0d93bc5f27be8885b6277919236ee7f8ccaa52f2c6cdade1df701d624c8d42e073fa88eb2491c92034
+  data.tar.gz: cef2e3b4387e7696ab2a6e032ddb9a1221c2d8c69e4185ae33b013e0aa1a22b44cf956ca3dfdad0a6bc4e1b3e8065cbb37ed874089cc2c544dd9d01545c39ed4

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2014 North Carolina State Univesity
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,108 @@
+# MediaElement.js Plugin for Preview Thumbnails
+
+Hover over the time rail on a [MediaElement.js](http://mediaelementjs.com/) player, and see video thumbnails.
+
+## Use
+
+To use this feature you will first need to create an image sprite and a metadata WebVTT file.
+
+### Create an Image Sprite
+
+The idea is to take a snapshot of your video every 5 seconds and then stitch the images together into a sprite. This means that only one image file needs to be requested from the server and switching between thumbnails can be very quick. 
+
+Here's one way you could create the image sprite using ffmpeg and montage (from ImageMagick):
+
+```
+ffmpeg -i "video-name.mp4" -f image2 -vf fps=fps=1/5 video-name-%05d.jpg
+montage video-name*jpg -tile 5x -geometry 150x video-name-sprite.jpg
+```
+
+First ffmpeg takes a snapshot of your video every 5 seconds. Then montage reduces each image to 150px across and tiles them from left to right 5 across.
+
+### Create a WebVTT metadata file
+
+Once you have the image sprite you'll also need to create a [WebVTT](http://docs.webplatform.org/wiki/concepts/VTT_Captioning) metadata file that contains the URL to your image sprite. For each time range of 5 seconds the URL is given including a [spatial Media Fragment](http://www.w3.org/TR/media-frags/) hash. This gives information about where in your sprite to look for the thumbnail for that time range. Here's an example of what one looks like:
+
+```
+WEBVTT
+
+00:00:00.000 --> 00:00:05.000
+http://example.com/video-name-sprite.jpg#xywh=0,0,150,100
+
+00:00:05.000 --> 00:00:10.000
+http://example.com/video-name-sprite.jpg#xywh=150,0,150,100
+
+00:00:10.000 --> 00:00:15.000
+http://example.com/video-name-sprite.jpg#xywh=300,0,150,100
+
+00:00:15.000 --> 00:00:20.000
+http://example.com/video-name-sprite.jpg#xywh=450,0,150,100
+
+00:00:20.000 --> 00:00:25.000
+http://example.com/video-name-sprite.jpg#xywh=600,0,150,100
+
+00:00:25.000 --> 00:00:30.000
+http://example.com/video-name-sprite.jpg#xywh=0,100,150,100
+```
+
+#### Current Sprite Limitations
+- All the images embedded in the sprite should have exactly the same dimensions. The styling for the thumbnail hover area is calculated based on the dimensions of the first URL in the WebVTT file.
+- Images should only be taken every 5 seconds. While this ought to be configurable in the future it currently is not.
+
+### Markup
+
+Add a new track element to your video element like the following:
+
+```html
+<track kind="metadata" class="time-rail-thumbnails" src="http://example.com/video-name-sprite.vtt"></track>
+```
+
+The kind attribute must be "metadata" and the class must be "time-rail-thumbnails". The WebVTT file should also be accessible via an AJAX request, so either have it on the same domain or allow cross-origin requests.
+
+### Initialization
+
+Add 'timerailsthumbnails' as the last feature when initializing the mediaelement player:
+
+```javascript
+$('video').mediaelementplayer({
+   features: ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails']
+});
+```
+
+## Installation
+
+This JavaScript plugin is made available as both a Rails Engine gem for the asset pipeline (unreleased) and a bower package. Choose your poison.
+
+### Rails
+
+Include it in your Gemfile:
+```ruby
+gem 'mep_feature_time_rail_thumbnails', git: 'git@github.com:jronallo/mep-feature-time-rail-thumbnails.git'
+```
+
+Add it to your application.js:
+```javascript
+//= require mep-feature-time-rail-thumbnails
+```
+
+### Bower
+
+Install with bower:
+```
+bower i mep_feature_time_rail_thumbnails
+```
+
+The file you want is at `bower_components/mep_feature_time_rail_thumbnails/vendor/assets/javascripts/mep-feature-time-rail-thumbnails.js`
+
+## TODO
+
+- Make the interval of thumbnails configurable or really use the timestamps in the WebVTT file rather than relying on 5 second increments.
+- Allow to work over HTTP and HTTPS.
+
+## Author
+
+Jason Ronallo
+
+## License
+
+This project rocks and uses MIT-LICENSE.

data/lib/mep_feature_time_rail_thumbnails.rb

@@ -0,0 +1,4 @@
+require "mep_feature_time_rail_thumbnails/engine"
+
+module MepFeatureTimeRailThumbnails
+end

data/lib/mep_feature_time_rail_thumbnails/engine.rb

@@ -0,0 +1,5 @@
+module MepFeatureTimeRailThumbnails
+  class Engine < ::Rails::Engine
+    isolate_namespace MepFeatureTimeRailThumbnails
+  end
+end

data/lib/mep_feature_time_rail_thumbnails/version.rb

@@ -0,0 +1,3 @@
+module MepFeatureTimeRailThumbnails
+  VERSION = "0.0.1"
+end

data/vendor/assets/javascripts/mep-feature-time-rail-thumbnails.js

@@ -0,0 +1,126 @@
+(function($) {
+
+  $.extend(MediaElementPlayer.prototype, {
+    buildtimerailthumbnails : function(player, controls, layers, media) {
+      if (!player.isVideo)
+        return;
+
+      function getVttCues(url) {
+        var vtt,
+        parser = new WebVTT.Parser(window, WebVTT.StringDecoder()),
+        cues = [];
+
+        // FIXME: Is there a way to do this with promises?
+        $.ajax({
+          url: url,
+          async: false,
+          success: function(data){
+            vtt = data;
+          },
+          error:function (xhr, ajaxOptions, thrownError){
+            if(xhr.status==404) {
+              vtt = null;
+            }
+          }
+        });
+        if (vtt) {
+          parser.oncue = function(cue) {
+            cues.push(cue);
+          };
+          parser.parse(vtt);
+          parser.flush();
+        }
+        return cues;
+      }
+
+      function parseMediaFragmentHash(url) {
+        var hash = url.substring(url.indexOf('#')+1);
+        return hash.split('=')[1].split(',');
+      }
+
+      function setThumbnailImage(url) {
+        $('.mejs-plugin-time-float-thumbnail').css('background-image','url(' + url.split('#')[0] + ')');
+      }
+
+      var
+        mediaContainer = player.container.find('.mejs-mediaelement').parent(),
+        element_to_observe = player.container.find('.mejs-time-float-current')[0],
+        video_thumbnail_vtt_url,
+        cues,
+        preview_thumbnails_track = mediaContainer.find("track[kind='metadata'].time-rail-thumbnails");
+
+      if (preview_thumbnails_track.length > 0) {
+        video_thumbnail_vtt_url = preview_thumbnails_track.attr('src');
+      } else {
+        return;
+      }
+      cues = getVttCues(video_thumbnail_vtt_url);
+
+      // If there is only one cue then there's no need to show thumbnails at all so don't do anything.
+      if (cues.length > 1) {
+        // Set up the container to hold the thumbnail.
+        var time_float = mediaContainer.find('.mejs-time-float');
+        time_float.prepend('<span class="mejs-plugin-time-float-thumbnail"></span>');
+
+        // Set necessary styles.
+        var xywh = parseMediaFragmentHash(cues[0].text);
+        var x = xywh[0];
+        var y = xywh[1];
+        var w = xywh[2];
+        var h = xywh[3];
+        var new_height = parseInt(h) + time_float.height();
+        time_float.css('top', '-' + new_height + 'px');
+        time_float.find('.mejs-time-float-corner').css('top', new_height - 3 + 'px');
+        time_float.css('height', 'auto');
+        time_float.css('width', w + 'px');
+        time_float.find('.mejs-time-float-current').css('position', 'static');
+        time_float.find('.mejs-plugin-time-float-thumbnail').css('position', 'static');
+
+        setThumbnailImage(cues[0].text);
+
+        // Add an observer to the .mejs-time-float-current and change the thumbnail
+        // when the observer is triggered
+        var observer = new MutationObserver(function(mutations){
+          var time_code_current = $('.mejs-time-float-current').text();
+
+          var sections = time_code_current.split(':');
+          if (sections.length < 3) {
+            time_code_current = "00:" + time_code_current;
+          }
+
+          // If the mouse is hovering over the 0 seconds mark, then show the first frame.
+          // Otherwise show something deeper into the video.
+          var seconds = mejs.Utility.timeCodeToSeconds(time_code_current),
+            cue;
+          if (seconds == 0) {
+            cue = cues[0];
+          } else {
+            // FIXME: Change 5 to be configurable for the number of tiles across
+            // or actually look up the time cues to see which cue to look into.
+            var tile = Math.floor(seconds / 5);
+            cue = cues[tile + 1];
+          }
+
+          // The text of the cue will be the background image of the thumbnail container.
+          setThumbnailImage(cue.text);
+
+          // Use the spatial media fragment hash of the url to determine the coordinates and size
+          // of the image to be displayed.
+          var xywh = parseMediaFragmentHash(cue.text);
+          var x = xywh[0];
+          var y = xywh[1];
+          var w = xywh[2];
+          var h = xywh[3];
+
+          // Set the background position and height and width.
+          $('.mejs-plugin-time-float-thumbnail').css('background-position', '-' + x + 'px -' + y + 'px' );
+          $('.mejs-plugin-time-float-thumbnail').css('height', h);
+          $('.mejs-plugin-time-float-thumbnail').css('width', w);
+
+        });
+
+        observer.observe(element_to_observe, {attributes: true, childList: true, characterData: true, subtree:true});
+      }
+    }
+  });
+})(mejs.$);

metadata

@@ -0,0 +1,63 @@
+--- !ruby/object:Gem::Specification
+name: mep_feature_time_rail_thumbnails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+platform: ruby
+authors:
+- Jason Ronallo
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-05-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.17
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.17
+description: Add a thumbnail preview to the MediaElement.js player.
+email:
+- jronallo@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- lib/mep_feature_time_rail_thumbnails.rb
+- lib/mep_feature_time_rail_thumbnails/engine.rb
+- lib/mep_feature_time_rail_thumbnails/version.rb
+- vendor/assets/javascripts/mep-feature-time-rail-thumbnails.js
+homepage: https://github.com/jronallo/mep-feature-time-rail-thumbnails
+licenses: []
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: MediaElement.js Plugin for Preview Thumbnails
+test_files: []