Skip to content
This repository was archived by the owner on Dec 17, 2018. It is now read-only.

update videojs and change css clip to background #38

Open
lareinating wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update videojs and change css clip to background #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 26 additions & 34 deletions example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<title>Video.js Thumbnails Example</title>
<link href="node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet">
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<link href="videojs.thumbnails.css" rel="stylesheet">
<style>
p {
Expand All @@ -11,7 +11,7 @@
padding: 10px;
}
</style>
<script src="node_modules/video.js/dist/video-js/video.js"></script>
<script src="node_modules/video.js/dist/video.js"></script>
<script src='videojs.thumbnails.js'></script>
</head>
<body>
Expand All @@ -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:
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
34 changes: 13 additions & 21 deletions videojs.thumbnails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -149,31 +140,32 @@
// `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;
} else if (left < halfWidth) {
left = halfWidth;
}

div.style.left = left + 'px';
div.style.left = (left - halfWidth) + 'px';
};

// update the thumbnail while hovering
Expand Down