commit 6959bdd8a4e75a3a358c869c6d98ce2ac6b8d9b7 Author: Mahdi Dibaiee Date: Fri Sep 25 19:03:45 2015 +0330 initial commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..9a99adc --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +Snaphash +======== +Preview video times with ease + +How it works? + +```html + + + +``` + +```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) diff --git a/index.js b/index.js new file mode 100644 index 0000000..a57bacb --- /dev/null +++ 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'); diff --git a/snaphash.js b/snaphash.js new file mode 100644 index 0000000..b3e4bc4 --- /dev/null +++ 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)) diff --git a/test.html b/test.html new file mode 100644 index 0000000..42b07ec --- /dev/null +++ b/test.html @@ -0,0 +1,23 @@ + + + + + Test + + + + + + + + + + + + diff --git a/test.mp4 b/test.mp4 new file mode 100644 index 0000000..0512bb9 Binary files /dev/null and b/test.mp4 differ