initial commit
This commit is contained in:
Mahdi Dibaiee
commit
6959bdd8a4
21
README.md
Normal file
21
README.md
Normal file
@ -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)
|
||||||
14
index.js
Normal file
14
index.js
Normal file
@ -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');
|
||||||
62
snaphash.js
Normal file
62
snaphash.js
Normal file
@ -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))
|
||||||
23
test.html
Normal file
23
test.html
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user