Thumbnail on Hover

Show a thumbnail when the user hovers over the progress bar. It doesn't move yet or adjust itself to the mouse position.
brightcove · Feb 21, 2013 · c014f3b · c014f3b
1 parent 5865de6
commit c014f3b
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 3 deletions.
diff --git a/example-thumbnail.png b/example-thumbnail.png
diff --git a/example.html b/example.html
@@ -0,0 +1,54 @@
+<!doctype html>
+<html>
+<head>
+  <title>Video.js Thumbnails Example</title>
+  <link href="node_modules/video-js/4.0.0-pre/video-js.css" rel="stylesheet">
+  <link href="videojs.thumbnails.css" rel="stylesheet">
+  <style>
+    p {
+      background-color: #eee;
+      border: thin solid #777;
+      padding: 10px;
+    }
+  </style>
+</head>
+<body>
+<p>The thumbnails plugin displays a series of images over the player
+progress bar when the viewer hovers over it or drags the playhead
+around to seek. Give it a shot:</p>
+
+<video id='video'
+       src='http://video-js.zencoder.com/oceans-clip.mp4'
+       class='video-js vjs-default-skin'
+       width='640'
+       height='264'
+       poster='http://video-js.zencoder.com/oceans-clip.jpg'
+       controls>
+</video>
+<script src='node_modules/video-js/4.0.0-pre/video.js'></script>
+<script src='videojs.thumbnails.js'></script>
+<script>
+// initialize video.js
+var video = videojs('video');
+
+// activate the thumbnail plugin
+video.thumbnails({
+  0: {
+    style: 'width: 120px'
+  },
+  10: {
+    style: 'width: 120px; background-position: 120px 0'
+  },
+  20: {
+    style: 'width: 120px; background-position: 240px 0'
+  },
+  30: {
+    style: 'width: 120px; background-position: 360px 0'
+  },
+  40: {
+    style: 'width: 120px; background-position: 480px 0'
+  }
+});
+</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "videojs-thumbnails",
+  "description": "progress bar thumbnails plugin for video.js",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "video-js": "4.0"
+  }
+}
diff --git a/thumbnails.png b/thumbnails.png
diff --git a/videojs.thumbnails.css b/videojs.thumbnails.css
@@ -0,0 +1,11 @@
+.vjs-thumbnail {
+  position: absolute;
+  bottom: 0;
+  opacity: 0;
+  transition: opacity .2s ease;
+  -webkit-transition: opacity .2s ease;
+  -moz-transition: opacity .2s ease;
+}
+.vjs-progress-control:hover .vjs-thumbnail {
+  opacity: 1;
+}
diff --git a/videojs.thumbnails.js b/videojs.thumbnails.js
@@ -1,3 +1,43 @@
-videojs.plugin('thumbnails', function(options) {
-  var settings = options;
-});
+(function() {
+  var defaults = {
+      0: {
+        src: 'example-thumbnail.png'
+      }
+    },
+    extend = function() {
+      var args, target, i, object, property;
+      args = Array.prototype.slice.call(arguments);
+      target = args.shift() || {};
+      for (i in args) {
+        object = args[i];
+        for (property in object) {
+          if (object.hasOwnProperty(property)) {
+            if (typeof object[property] === 'object') {
+              target[property] = extend(target[property], object[property]);
+            } else {
+              target[property] = object[property];
+            }
+          }
+        }
+      }
+      return target;
+    };
+
+  /**
+   * register the thubmnails plugin
+   */
+  videojs.plugin('thumbnails', function(options) {
+    var settings, img, progressControl;
+    settings = extend(defaults, options);
+
+    // create the thumbnail image
+    img = document.createElement('img');
+    img.src = settings['0'].src;
+    img.setAttribute('style', settings['0'].style || '');
+    img.setAttribute('class', 'vjs-thumbnail');
+
+    // add the thumbnail to the player
+    progressControl = this.controlBar.progressControl.el();
+    progressControl.appendChild(img);
+  });
+})();