mep_feature_time_rail_thumbnails 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 581863f9c3305a8e58bab3fd847f0ca4749057ab
-  data.tar.gz: 805a293d56f27f0331601cddb794444564212403
+  metadata.gz: 1cc824c0d71af3824d8c886ed0eaf9928198a624
+  data.tar.gz: 4f7ebec9024acc308bf697ae8fdaed8374432a4e
 SHA512:
-  metadata.gz: e0ad1312a6e0028608934e253ca0e065fc72e7a36cdeaa0d93bc5f27be8885b6277919236ee7f8ccaa52f2c6cdade1df701d624c8d42e073fa88eb2491c92034
-  data.tar.gz: cef2e3b4387e7696ab2a6e032ddb9a1221c2d8c69e4185ae33b013e0aa1a22b44cf956ca3dfdad0a6bc4e1b3e8065cbb37ed874089cc2c544dd9d01545c39ed4
+  metadata.gz: 389e28c0b11d19041f9cd5882ce003b84f884703691552975c6502cffa1a017aa2f1ed113bde7ea679958a92ec3ec6e5072b0c5ba3119aab153f5ac4afad2f63
+  data.tar.gz: fe2a926090528a01f56073f15f678fabf00de27d5041733b14fb12e2870eeecaa069d1da2c13d09c6972794bf153f8e987247418343c2b1fee103d11d549c58d

data/README.md

@@ -1,6 +1,8 @@
 # MediaElement.js Plugin for Preview Thumbnails
 
-Hover over the time rail on a [MediaElement.js](http://mediaelementjs.com/) player, and see video thumbnails.
+Hover over the time rail on a [MediaElement.js](http://mediaelementjs.com/) player and see video thumbnails.
+
+[See a video of this in action](http://jronallo.github.io/mep-feature-time-rail-thumbnails/)
 
 ## Use
 
@@ -8,7 +10,7 @@ To use this feature you will first need to create an image sprite and a metadata
 
 ### 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. 
+The idea is to take a snapshot of your video every N 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):
 
@@ -46,8 +48,10 @@ 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.
+
+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.
+
+The durations that each thumbnail ought to show should be consistent. The default is 5 seconds, though this is configurable when initializing the player.
 
 ### Markup
 
@@ -65,19 +69,26 @@ Add 'timerailsthumbnails' as the last feature when initializing the mediaelement
 
 ```javascript
 $('video').mediaelementplayer({
-   features: ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails']
+   features: ['playpause','progress','current','duration','tracks','volume', 'timerailthumbnails'],
+    timeRailThumbnailsSeconds: 5
 });
 ```
 
+Also, either use the default of 5 second intervals for each thumbnail or set `timeRailThumbnailsSeconds` to the appropriate value.
+
 ## 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.
 
+### vtt.js
+
+This plugin relies on the [vtt.js](https://github.com/mozilla/vtt.js/tree/master) library for WebVTT parsing. You'll need to include this before including mep-feature-time-rail-thumbnails.js.
+
 ### Rails
 
 Include it in your Gemfile:
 ```ruby
-gem 'mep_feature_time_rail_thumbnails', git: 'git@github.com:jronallo/mep-feature-time-rail-thumbnails.git'
+gem 'mep_feature_time_rail_thumbnails'
 ```
 
 Add it to your application.js:
@@ -94,10 +105,12 @@ 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`
 
+The latest vtt.js is not currently available from bower.
+
 ## 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.
+- Update bower.json dependencies and instructions when [this bug](https://github.com/mozilla/vtt.js/issues/311) is closed.
 
 ## Author
 

data/lib/mep_feature_time_rail_thumbnails/version.rb

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

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

@@ -5,6 +5,17 @@
       if (!player.isVideo)
         return;
 
+      // This relies on mutation observers right now, so if those aren't available just
+      // abandon it.
+      if (!window.MutationObserver)
+        return;
+
+      // Check for presence of WebVTT
+      if (!WebVTT) {
+        console.log('mep-feature-time-rail-thumbnails.js requires vtt.js');
+        return;
+      }
+
       function getVttCues(url) {
         var vtt,
         parser = new WebVTT.Parser(window, WebVTT.StringDecoder()),
@@ -39,7 +50,9 @@
       }
 
       function setThumbnailImage(url) {
-        $('.mejs-plugin-time-float-thumbnail').css('background-image','url(' + url.split('#')[0] + ')');
+        // Make sure the url is protocol/scheme relative
+        var protocol_relative_url = url.substr(url.indexOf('://')+1);
+        $('.mejs-plugin-time-float-thumbnail').css('background-image','url(' + protocol_relative_url.split('#')[0] + ')');
       }
 
       var
@@ -47,7 +60,14 @@
         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");
+        preview_thumbnails_track = mediaContainer.find("track[kind='metadata'].time-rail-thumbnails"),
+        time_rail_thumbnails_seconds;
+
+      if (player.options.timeRailThumbnailsSeconds) {
+        time_rail_thumbnails_seconds = player.options.timeRailThumbnailsSeconds;
+      } else {
+        time_rail_thumbnails_seconds = 5;
+      }
 
       if (preview_thumbnails_track.length > 0) {
         video_thumbnail_vtt_url = preview_thumbnails_track.attr('src');
@@ -95,9 +115,7 @@
           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);
+            var tile = Math.floor(seconds / time_rail_thumbnails_seconds);
             cue = cues[tile + 1];
           }
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: mep_feature_time_rail_thumbnails
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.0.2
 platform: ruby
 authors:
 - Jason Ronallo
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-05-06 00:00:00.000000000 Z
+date: 2014-05-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails