diff --git a/example.html b/example.html
index f6b04a5..55b9fe5 100644
--- a/example.html
+++ b/example.html
@@ -2,7 +2,7 @@
Video.js Thumbnails Example
-
+
-
+
@@ -33,39 +33,31 @@
// here's an example of generating thumbnails from a sprited image:
video.thumbnails({
- 0: {
- src: 'thumbnails.png',
- style: {
- left: '-60px',
- width: '600px',
- height: '68px',
- clip: 'rect(0, 120px, 68px, 0)'
- }
- },
- 10: {
- style: {
- left: '-180px',
- clip: 'rect(0, 240px, 68px, 120px)'
- }
- },
- 20: {
- style: {
- left: '-300px',
- clip: 'rect(0, 360px, 68px, 240px)'
+ 0: {
+ src: 'url(\"https://i9.ytimg.com/sb/9xkiaw-uyyE/storyboard3_L2/M0.jpg?sigh=CfYdoMksBZzEZbkeKHWPKa7L9Xg\")',
+ width: '100px',
+ height: '80px',
+ left: '80px',
+ bottom: '27px',
+ x: '-470px',
+ y: '-497px',
+ },
+ 10: {
+ x: '-470px',
+ y: '-430px',
+ },
+ 20: {
+ x: '-450px',
+ y: '-400px',
+ },
+ 30: {
+ x: '-420px',
+ y: '-350px',
+ },
+ 40: {
+ x: '-350px',
+ y: '-200px',
}
- },
- 30: {
- style: {
- left: '-420px',
- clip: 'rect(0, 480px, 68px, 360px)'
- }
- },
- 40: {
- style: {
- left: '-540px',
- clip: 'rect(0, 600px, 68px, 480px)'
- }
- }
});
// and here's an example of the bare-minimum plugin configuration:
diff --git a/package.json b/package.json
index 61a7a79..f13f9e7 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,6 @@
"grunt": "^0.4.4",
"grunt-contrib-connect": "^0.9.0",
"grunt-contrib-jshint": "^0.10.0",
- "video.js": "^4.12"
+ "video.js": "5.19.2"
}
}
diff --git a/videojs.thumbnails.js b/videojs.thumbnails.js
index 8c3b176..95fba04 100644
--- a/videojs.thumbnails.js
+++ b/videojs.thumbnails.js
@@ -97,22 +97,13 @@
// create the thumbnail
div = document.createElement('div');
div.className = 'vjs-thumbnail-holder';
- img = document.createElement('img');
- div.appendChild(img);
- img.src = settings['0'].src;
- img.className = 'vjs-thumbnail';
- extend(img.style, settings['0'].style);
-
- // center the thumbnail over the cursor if an offset wasn't provided
- if (!img.style.left && !img.style.right) {
- img.onload = function() {
- img.style.left = -(img.naturalWidth / 2) + 'px';
- };
- }
+ div.style.bottom = settings[0].bottom;
+ div.style.height = settings[0].height;
+ div.style.left = settings[0].left;
// keep track of the duration to calculate correct thumbnail to display
duration = player.duration();
-
+
// when the container is MP4
player.on('durationchange', function(event) {
duration = player.duration();
@@ -149,23 +140,24 @@
// `left` applies to the mouse position relative to the player so we need
// to remove the progress control's left offset to know the mouse position
// relative to the progress control
- mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration);
+ var mouseTimeHMS = document.getElementsByClassName("vjs-mouse-display")[0].getAttribute("data-current-time").split(":");
+ var mouseTime = 0;
+ for(var i = mouseTimeHMS.length - 1; i >= 0; i--)
+ mouseTime += parseInt((i == mouseTimeHMS.length-1) ? (mouseTimeHMS[i]) : ((i == mouseTimeHMS.length-2) ? (mouseTimeHMS[i] * 60) : ((i == mouseTimeHMS.length-3) ? (mouseTimeHMS[i] * 60 * 60) : (0))));
+
for (time in settings) {
if (mouseTime > time) {
active = Math.max(active, time);
}
}
setting = settings[active];
- if (setting.src && img.src != setting.src) {
- img.src = setting.src;
- }
- if (setting.style && img.style != setting.style) {
- extend(img.style, setting.style);
- }
width = getVisibleWidth(img, setting.width || settings[0].width);
halfWidth = width / 2;
+ div.style.width = width + 'px';
+ div.style.background = settings[0].src + setting.x + " " + setting.y +" / 800px 600px";
+
// make sure that the thumbnail doesn't fall off the right side of the left side of the player
if ( (left + halfWidth) > right ) {
left -= (left + halfWidth) - right;
@@ -173,7 +165,7 @@
left = halfWidth;
}
- div.style.left = left + 'px';
+ div.style.left = (left - halfWidth) + 'px';
};
// update the thumbnail while hovering