https://www.liveviolet.net/media/player/videojs/plugins/videojs-thumbnails-master/videojs.thumbnails.js

1(function() {
2    var defaults = {
3            0: {
4                src: 'example-thumbnail.png'
5            }
6        },
7        extend = function() {
8            var args, target, i, object, property;
9            args = Array.prototype.slice.call(arguments);
10            target = args.shift() || {};
11            for (i in args) {
12                object = args[i];
13                for (property in object) {
14                    if (object.hasOwnProperty(property)) {
15                        if (typeof object[property] === 'object') {
16                            target[property] = extend(target[property], object[property]);
17                        } else {
18                            target[property] = object[property];
19                        }
20                    }
21                }
22            }
23            return target;
24        },
25        getComputedStyle = function(el, pseudo) {
26            return function(prop) {
27                if (window.getComputedStyle) {
28                    return window.getComputedStyle(el, pseudo)[prop];
29                } else {
30                    return el.currentStyle[prop];
31                }
32            };
33        },
34        offsetParent = function(el) {
35            if (el.nodeName !== 'HTML' && getComputedStyle(el)('position') === 'static') {
36                return offsetParent(el.offsetParent);
37            }
38            return el;
39        },
40        getVisibleWidth = function(el, width) {
41            var clip;
42            if (width) {
43                return parseFloat(width);
44            }
45            clip = getComputedStyle(el)('clip');
46            if (clip !== 'auto' && clip !== 'inherit') {
47                clip = clip.split(/(?:\(|\))/)[1].split(/(?:,| )/);
48                if (clip.length === 4) {
49                    return (parseFloat(clip[1]) - parseFloat(clip[3]));
50                }
51            }
52            return 0;
53        },
54        getScrollOffset = function() {
55            if (window.pageXOffset) {
56                return {
57                    x: window.pageXOffset,
58                    y: window.pageYOffset
59                };
60            }
61            return {
62                x: document.documentElement.scrollLeft,
63                y: document.documentElement.scrollTop
64            };
65        };
66    videojs.plugin('thumbnails', function(options) {
67        var div, settings, img, player, progressControl, duration, moveListener, moveCancel;
68        settings = extend({}, defaults, options);
69        player = this;
70        (function() {
71            var progressControl, addFakeActive, removeFakeActive;
72            if (navigator.userAgent.toLowerCase().indexOf("android") !== -1) {
73                progressControl = player.controlBar.progressControl;
74                addFakeActive = function() {
75                    progressControl.addClass('fake-active');
76                };
77                removeFakeActive = function() {
78                    progressControl.removeClass('fake-active');
79                };
80                progressControl.on('touchstart', addFakeActive);
81                progressControl.on('touchend', removeFakeActive);
82                progressControl.on('touchcancel', removeFakeActive);
83            }
84        })();
85        div = document.createElement('div');
86        div.className = 'vjs-thumbnail-holder';
87        img = document.createElement('img');
88        div.appendChild(img);
89        img.src = settings['0'].src;
90        img.className = 'vjs-thumbnail';
91        extend(img.style, settings['0'].style);
92        if (!img.style.left && !img.style.right) {
93            img.onload = function() {
94                img.style.left = -(img.naturalWidth / 2) + 'px';
95            };
96        }
97        duration = player.duration();
98        player.on('durationchange', function(event) {
99            duration = player.duration();
100        });
101        player.on('loadedmetadata', function(event) {
102            duration = player.duration();
103        });
104        progressControl = player.controlBar.progressControl;
105        progressControl.el().appendChild(div);
106        moveListener = function(event) {
107            var mouseTime, time, active, left, setting, pageX, right, width, halfWidth, pageXOffset, clientRect;
108            active = 0;
109            pageXOffset = getScrollOffset().x;
110            clientRect = offsetParent(progressControl.el()).getBoundingClientRect();
111            right = (clientRect.width || clientRect.right) + pageXOffset;
112            pageX = event.pageX;
113            if (event.changedTouches) {
114                pageX = event.changedTouches[0].pageX;
115            }
116            left = pageX || (event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
117            left -= offsetParent(progressControl.el()).getBoundingClientRect().left + pageXOffset;
118            var mouseTimeHMS = $(".vjs-mouse-display").attr("data-current-time").split(":");
119            var mouseTime = 0;
120            for (var i = mouseTimeHMS.length - 1; i >= 0; i--) {
121                mouseTime += parseInt((i == mouseTimeHMS.length - 1) ? (mouseTimeHMS[i]) : ((i == mouseTimeHMS.length - 2) ? (mouseTimeHMS[i] * 60) : ((i == mouseTimeHMS.length - 3) ? (mouseTimeHMS[i] * 60 * 60) : (0))));
122            }
123            for (time in settings) {
124                if (mouseTime > time) {
125                    active = Math.max(active, time);
126                }
127            }
128            setting = settings[active];
129            if (setting.src && img.src != setting.src) {
130                img.src = setting.src;
131            }
132            if (setting.style && img.style != setting.style) {
133                extend(img.style, setting.style);
134            }
135            width = getVisibleWidth(img, setting.width || settings[0].width);
136            halfWidth = width / 2;
137            if ((left + halfWidth) > right) {
138                left -= (left + halfWidth) - right;
139            } else if (left < halfWidth) {
140                left = halfWidth;
141            }
142            div.style.left = left + 'px';			
143        };
144        progressControl.on('mousemove', moveListener);
145        progressControl.on('touchmove', moveListener);
146        moveCancel = function(event) {
147            div.style.left = '-1000px';
148        };
149        progressControl.on('mouseout', moveCancel);
150        progressControl.on('touchcancel', moveCancel);
151        progressControl.on('touchend', moveCancel);
152        player.on('userinactive', moveCancel);
153    });
154})();