Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save treyruncie/6308854 to your computer and use it in GitHub Desktop.
Save treyruncie/6308854 to your computer and use it in GitHub Desktop.
Makes the config object for this videojs plugin from an image node https://github.com/brightcove/videojs-thumbnails.
YUI().use('node', 'event', function (Y) {
var YLang = Y.Lang,
src = 'http://placehold.it/320x90',
img = Y.Node.create('<img src="'+src+'" />'),
cellCount = null,
thumbnails = {},
width = null,
imageWidth = null,
cellWidth = 160,
left, right, leftPos,
height = '90px',
clipTemp = 'rect(0, {right}px, '+height+', {left}px)'; // top right bottom left
img.after('load', function (e) {
imageWidth = e.currentTarget.get('width');
cellCount = Math.round(imageWidth/cellWidth);
for (var i = 0; i <= cellCount; i++) {
left = cellWidth*i;
leftPos = cellWidth/2+left;
right = left + cellWidth;
thumbnails[i] = {
style: {
left: '-'+leftPos+'px',
clip: YLang.sub(clipTemp, {right: right, left: left})
}
};
};
thumbnails[0]['src'] = src;
thumbnails[0]['style']['width'] = imageWidth+'px';
thumbnails[0]['style']['height'] = height;
var video = videojs('example_video_1');
video.thumbnails(thumbnails);
}, this);
});
// EXAMPLE OUTPUT
// {
// 0: {
// src: 'thumbnails.png',
// style: {
// left: '-60px',
// width: '600px',
// height: '68px',
// clip: 'rect(0, 120px, 68px, 0)'
// }
// },
// 2: {
// style: {
// left: '-180px',
// clip: 'rect(0, 240px, 68px, 120px)'
// }
// },
// 3: {
// style: {
// left: '-300px',
// clip: 'rect(0, 360px, 68px, 240px)'
// }
// }
// }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment