initial commit

2015-09-25 19:03:45 +03:30 · 2015-09-25 19:03:45 +03:30 · 6959bdd8a4
commit 6959bdd8a4
5 changed files with 120 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,21 @@
+Snaphash
+========
+Preview video times with ease
+
+How it works?
+
+```html
+<video id="myvideo" src="big-buck-bunny.mp4"></video>
+
+<img data-snap="#myvideo@00:00:15" />
+```
+
+```javascript
+Snaphash('img');
+```
+
+That's all, a preview of video at 00:00:15 will be shown in the `img` element.
+
+You can omit unnecessary zeros from time.
+
+See a [demo](http://mdibaiee.github.io/snaphash)
--- a/index.js
+++ b/index.js
@ -0,0 +1,14 @@
+var range = document.querySelector('input');
+var video = document.querySelector('video');
+var img = document.querySelector('img');
+
+video.addEventListener('canplay', function() {
+  range.max = parseInt(video.duration, 10);
+})
+
+range.addEventListener('input', function() {
+  img.dataset.snap = '#myvideo@' + range.value;
+  Snaphash('img');
+})
+
+Snaphash('img');
--- a/snaphash.js
+++ b/snaphash.js
@ -0,0 +1,62 @@
+(function(global) {
+  var canvas = document.createElement('canvas');
+  var context = canvas.getContext('2d');
+
+  var Snaphash = function(els) {
+    if (typeof els === 'string') els = document.querySelectorAll(els);
+    this.els = els.length ? els : [els];
+
+    for (var i = 0, len = els.length; i < len; i++) {
+      var el = els[i];
+      var src = parseSource(el.dataset.snap);
+
+      var target = document.querySelector(src.selector).cloneNode();
+
+      function listener() {
+        target.currentTime = src.time;
+
+        target.addEventListener('seeked', function seeked() {
+          canvas.width = target.videoWidth;
+          canvas.height = target.videoHeight;
+          context.drawImage(target, 0, 0);
+
+          el.src = canvas.toDataURL();
+
+          target.removeEventListener('seeked', seeked);
+          target.remove();
+        })
+
+        target.removeEventListener('canplay', listener)
+      }
+
+      if (target.readyState === 4) {
+        listener();
+      } else {
+        target.addEventListener('canplay', listener);
+      }
+    }
+  }
+
+  function parseSource(src) {
+    var split = src.split('@');
+    var selector = split[0];
+    var time = parseTime(split[1]);
+
+    return {selector: selector, time: time};
+  }
+
+  function parseTime(time) {
+    var split = time.split(':');
+    var parsed = {
+      second: +split[split.length - 1] || 0,
+      minute: +split[split.length - 2] || 0,
+      hour: +split[split.length - 3] || 0
+    }
+
+    var total = parsed.second + parsed.minute * 60 + parsed.hour * 3600;
+
+    return total;
+  }
+
+  global.Snaphash = Snaphash;
+}(this))
--- a/test.html
+++ b/test.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Test</title>
+
+  <style>
+    video, img, input {
+      display: block;
+      margin: 2rem auto;
+
+    }
+  </style>
+</head>
+<body>
+  <video id="myvideo" controls src="test.mp4"></video>
+  <input type='range' min='0' step='1'>
+  <img data-snap="#myvideo@14" />
+
+  <script src='snaphash.js'></script>
+  <script src='index.js'></script>
+</body>
+</html>
--- a/test.mp4
+++ b/test.mp4