1 |
|
2 | (function (global, factory) {
|
3 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('video.js')) :
|
4 | typeof define === 'function' && define.amd ? define(['video.js'], factory) :
|
5 | (global = global || self, global.videojsSpriteThumbnails = factory(global.videojs));
|
6 | }(this, (function (videojs) { 'use strict';
|
7 |
|
8 | videojs = videojs && Object.prototype.hasOwnProperty.call(videojs, 'default') ? videojs['default'] : videojs;
|
9 |
|
10 | function _inheritsLoose(subClass, superClass) {
|
11 | subClass.prototype = Object.create(superClass.prototype);
|
12 | subClass.prototype.constructor = subClass;
|
13 | subClass.__proto__ = superClass;
|
14 | }
|
15 |
|
16 | |
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
26 | function spriteThumbs(player, options) {
|
27 | var url = options.url;
|
28 | var height = options.height;
|
29 | var width = options.width;
|
30 | var responsive = options.responsive;
|
31 | var dom = videojs.dom || videojs;
|
32 | var controls = player.controlBar;
|
33 | var progress = controls.progressControl;
|
34 | var seekBar = progress.seekBar;
|
35 | var mouseTimeDisplay = seekBar.mouseTimeDisplay;
|
36 |
|
37 | if (url && height && width && mouseTimeDisplay) {
|
38 | var img = dom.createEl('img', {
|
39 | src: url
|
40 | });
|
41 |
|
42 | var tooltipStyle = function tooltipStyle(obj) {
|
43 | Object.keys(obj).forEach(function (key) {
|
44 | var val = obj[key];
|
45 | var ttstyle = mouseTimeDisplay.timeTooltip.el().style;
|
46 |
|
47 | if (val !== '') {
|
48 | ttstyle.setProperty(key, val);
|
49 | } else {
|
50 | ttstyle.removeProperty(key);
|
51 | }
|
52 | });
|
53 | };
|
54 |
|
55 | var hijackMouseTooltip = function hijackMouseTooltip() {
|
56 | var imgWidth = img.naturalWidth;
|
57 | var imgHeight = img.naturalHeight;
|
58 |
|
59 | if (player.controls() && imgWidth && imgHeight) {
|
60 | var hoverPosition = parseFloat(mouseTimeDisplay.el().style.left);
|
61 | hoverPosition = player.duration() * (hoverPosition / seekBar.currentWidth());
|
62 |
|
63 | if (!isNaN(hoverPosition)) {
|
64 | hoverPosition = hoverPosition / options.interval;
|
65 | var playerWidth = player.currentWidth();
|
66 | var scaleFactor = responsive && playerWidth < responsive ? playerWidth / responsive : 1;
|
67 | var columns = imgWidth / width;
|
68 | var scaledWidth = width * scaleFactor;
|
69 | var scaledHeight = height * scaleFactor;
|
70 | var cleft = Math.floor(hoverPosition % columns) * -scaledWidth;
|
71 | var ctop = Math.floor(hoverPosition / columns) * -scaledHeight;
|
72 | var bgSize = imgWidth * scaleFactor + 'px ' + imgHeight * scaleFactor + 'px';
|
73 | var controlsTop = dom.getBoundingClientRect(controls.el()).top;
|
74 | var seekBarTop = dom.getBoundingClientRect(seekBar.el()).top;
|
75 |
|
76 | var topOffset = -scaledHeight - Math.max(0, seekBarTop - controlsTop);
|
77 | tooltipStyle({
|
78 | 'width': scaledWidth + 'px',
|
79 | 'height': scaledHeight + 'px',
|
80 | 'background-image': 'url(' + url + ')',
|
81 | 'background-repeat': 'no-repeat',
|
82 | 'background-position': cleft + 'px ' + ctop + 'px',
|
83 | 'background-size': bgSize,
|
84 | 'top': topOffset + 'px',
|
85 | 'color': '#fff',
|
86 | 'text-shadow': '1px 1px #000',
|
87 | 'border': '1px solid #000',
|
88 | 'margin': '0 1px'
|
89 | });
|
90 | }
|
91 | }
|
92 | };
|
93 |
|
94 | tooltipStyle({
|
95 | 'width': '',
|
96 | 'height': '',
|
97 | 'background-image': '',
|
98 | 'background-repeat': '',
|
99 | 'background-position': '',
|
100 | 'background-size': '',
|
101 | 'top': '',
|
102 | 'color': '',
|
103 | 'text-shadow': '',
|
104 | 'border': '',
|
105 | 'margin': ''
|
106 | });
|
107 | progress.on('mousemove', hijackMouseTooltip);
|
108 | progress.on('touchmove', hijackMouseTooltip);
|
109 | player.addClass('vjs-sprite-thumbnails');
|
110 | }
|
111 | }
|
112 |
|
113 | var version = "0.5.3";
|
114 |
|
115 | var Plugin = videojs.getPlugin('plugin');
|
116 | |
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 | var defaults = {
|
132 | url: '',
|
133 | width: 0,
|
134 | height: 0,
|
135 | interval: 1,
|
136 | responsive: 600
|
137 | };
|
138 | |
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 | var SpriteThumbnails = function (_Plugin) {
|
145 | _inheritsLoose(SpriteThumbnails, _Plugin);
|
146 |
|
147 | |
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 | function SpriteThumbnails(player, options) {
|
157 | var _this;
|
158 |
|
159 |
|
160 | _this = _Plugin.call(this, player) || this;
|
161 | _this.options = videojs.mergeOptions(defaults, options);
|
162 |
|
163 | _this.player.ready(function () {
|
164 | spriteThumbs(_this.player, _this.options);
|
165 | });
|
166 |
|
167 | return _this;
|
168 | }
|
169 |
|
170 | return SpriteThumbnails;
|
171 | }(Plugin);
|
172 |
|
173 |
|
174 | SpriteThumbnails.defaultState = {};
|
175 |
|
176 | SpriteThumbnails.VERSION = version;
|
177 |
|
178 | videojs.registerPlugin('spriteThumbnails', SpriteThumbnails);
|
179 |
|
180 | return SpriteThumbnails;
|
181 |
|
182 | })));
|