brightcove / videojs-thumbnails Goto Github PK

A video.js plugin that displays thumbnail images over the scrubber.

License: Other

JavaScript 72.42% CSS 9.21% HTML 18.37%

videojs-thumbnails's Introduction

Video.js Thumbnails

A plugin that allows you to configure thumbnails to display when the user is hovering over the progress bar or dragging it to seek.

Using the Plugin

The plugin automatically registers itself when you include video.thumbnails.js in your page:

<script src='videojs.thumbnails.js'></script>

You probably want to include the default stylesheet, too. It handles showing and hiding thumbnails while hovering over the progress bar and a quick animation during the transition:

<link href="videojs.thumbnails.css" rel="stylesheet">

Once you have your video created, you can activate the thumbnails plugin. In the first argument to the plugin, you should pass an object whose properties are the time in seconds you wish to display your thumbnails. At minimum, you'll need a prerty 0 with a src: the thumbnail to display if the user were to hover over the beginning of the progress bar. If you add additional times, they'll partition the progress bar and change the image that is displayed when the user hovers over that area. If you wanted to display one thumbnail for the first five seconds of a video and then another for the rest of the time, you could do it like this:

video.thumbnails({
  0: {
    src: 'http://example.com/thumbnail1.png',
    width: '120px'
  },
  5: {
    src: 'http://example.com/thumbnail2.png'
  }
});

For each thumbnail time period, you can specify any other style changes you'd like to change when the user enters that region of the progress bar. Check out example.html to see how that technique can be used to create multiple thumbnails out of a single, sprited image.

The width property on each time period lets us know what the visible portion of the thumbnail should be. This is so that thumbnails won't reach beyond the player and perhaps get cut off. It can be specified on each time period or on the 0 time period.

videojs-thumbnails's People

Contributors

Stargazers

Watchers

videojs-thumbnails's Issues

How to generate the thumbnail object array?

I'm confused on how to generate the object array of thumbnails. Can you make it clear somewhere in the documentation (Readme.md) how this is done in Javascript?

The issue i'd think many people including myself have is how to generate an array with numeric keys.

      0: {
        src: '/assets/img/01.png'
      },
      5: {
        src: '/assets/img/02.png'
      },
      10: {
        src: '/assets/img/03.png'
      }

I created a gist which doesn't work but at least would get us started on how people should be generating this array https://gist.github.com/tim-peterson/5610133

Thumbnails not updating with Firefox

I test with Safari and IE9 and Firefox on Windows.
The first 2 broswer are ok.
However with Firefox only the first thumbnail is show.
I test against VideoJS 4.0 and and 4.1 and 4.2.1, the result are the same.
The variable 'mouseTime' is not updated with Firefox because 'event.offsetX' is undefined.
I am using FF24.0 on Windows7 64bits.

I used this array:

video.thumbnails({
  0: {
    src: 'test_ogv-th_0.png'
  },
  10: {
    src: 'test_ogv-th_10.png'
  },
  20: {
    src: 'test_ogv-th_20.png'
  },
  30: {
    src: 'test_ogv-th_30.png'
  },
  40: {
    src: 'test_ogv-th_40.png'
  }
});

Thumbnail onclick seek to the time.

Hello,

I have a idea.
If the Thumbnail is clicked player seek to the current time of the thumbnail.

img.onclick = function(event) {
?
};

Can you help me, please?

Multiple Sprite Sheet Sources

I had originally tried to use the Video.js Thumbnails plugin with multiple sprite sheets (for example, I had a video that was 3 minutes long, and each sprite sheet contained say 60 seconds worth of thumbnsil.) But it seemed to have a problem switching between img src's propertly. I made the following to solve this problem. It assumes that the sprite sheets are in a 1xn fashion (one row and n columns), and it just checks that the necessary sprite (according to the designated time) is equal to the sprite going to be shown.

videojs.plugin('thumbnails_SpriteSheet', function (options, timeInterval, spritesPerSheet) {
    var div, settings, img, player, progressControl, duration;
    settings = extend({}, defaults, options);
    player = this;                

    // 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';
        }
    };

    // keep track of the duration to calculate correct thumbnail to display
    duration = player.duration();
    player.on('durationchange', function (event) {
        duration = player.duration();
    });

    // add the thumbnail to the player
    progressControl = player.controlBar.progressControl;
    progressControl.el().appendChild(div);

    // update the thumbnail while hovering
    progressControl.el().addEventListener('mousemove', function (event) {
        var mouseTime, time, active, left, setting;

        active = 0;

        // find the page offset of the mouse
        left = event.pageX || (event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
        // subtract the page offset of the progress control
        left -= progressControl.el().getBoundingClientRect().left + window.scrollX;
        div.style.left = left + 'px';

        // apply updated styles to the thumbnail if necessary
        // The following fixes bug where hovering over progress slider resets offset to 0:
        // https://github.com/brightcove/videojs-thumbnails/issues/3
        // start fix
        var relativeX = (event.pageX - $(this).parent().offset().left);
        mouseTime = Math.floor(relativeX / progressControl.width() * duration);
        // end fix

        //mouseTime = Math.floor(event.offsetX / progressControl.width() * duration);            

        for (time in settings) {
            if (mouseTime > time) {
                active = Math.max(active, time);
            }
        }
        setting = settings[active];
        // This is not part of the original video.thumbnails.js code. It was added to work around multiple
        // thumbnail sprite sheets. 300 is the number of seconds in one sprite sheet and is hard-coded. The 
        // following code checks the current img.src against the required src, which should be mouseTime / 300
        // (integer division) multiplied by 300 again.
        var secondsPerSheet = timeInterval * spritesPerSheet;
        var x = Math.floor(mouseTime / secondsPerSheet);
        x = x * secondsPerSheet;
        var sourceNeeded = settings[x];

        if (setting.src && (img.src != setting.src)) {

            img.src = setting.src;
        }
        // This check has been added to make sure that img src being used is the one that is needed.
        if (sourceNeeded.src && (img.src != sourceNeeded.src)) {

            img.src = sourceNeeded.src;
        }
        if (setting.style && img.style != setting.style) {
            extend(img.style, setting.style);
        }
    }, false);
});

I just threw this above the original 'thumbnails' function call and use 'thumbnails_SpriteSheet(...)' instead if that is what I need. timeInterval is the time between sprite sheets (it assumes the interval between sprites is the same), and spritesPerSheet is the number of sprites per sprite sheet. These are used to find how many seconds of video each sprite sheet should contain.

Not very complicated, but hopefully it helps someone.

forked example.html does not work

hey, I've forked your project as I'd like to use it in my site however when testing the example i get errors (in chrome) has something been broken or am I doing something wrong? any insight would be awesome thanks for the code ... if this is a real issue just confirm if for me

Multiple requests for thumbnails.png

STR:
Build and Play defaults
Hover over progress fire

This is more of an observation than a bug to note the multiple requests. No requests for the thumbnails.png are made until the cursor is hovering over the progress bar. Once the cursor is hovering over the progress bar, multiple requests are made for the thumbnail.png- all returning 304

Thumbnail not changing with Firefox.

How to assign different sprited images to thumbnails

i am using 628 second video and convert it to sprite of 10x10. it makes 2 images file M0.jpg , M1.jpg
i want to show each sprite for five second and now there are two problems.

1.it works fine for M0.jpg but it does'nt work for M1.jpg.How can we give the src of M1.jpg so that it works fine for next 128 seonds?
2.if we have video which length is 1000 seconds then how we change this code automatically for this video or every length of video?
video.thumbnails({
0:{src: 'M0.jpg',style: {left: '-40px',width: '800px',height: '450px',top: '-60px',clip: 'rect(0, 80px, 45px, 0px)'}},
5:{src: 'M0.jpg',style: {left: '-120px',width: '800px',height: '450px',top: '-60px',clip: 'rect(0, 160px, 45px, 80px)'}},
10:{src: 'M0.jpg',style: {left: '-200px',width: '800px',height: '450px',top: '-60px',clip: 'rect(0, 240px, 45px, 160px)'}},
15:{src: 'M0.jpg',style: {left: '-280px',width: '800px',height: '450px',top: '-60px',clip: 'rect(0, 320px, 45px, 240px)'}},
.
.
500:{src: 'M1.jpg',style: {left: '-40px',width: '800px',height: '135px',top: '-60px',clip: 'rect(0, 80px, 45px, 0px)'}},
505:{src: 'M1.jpg',style: {left: '-120px',width: '800px',height: '135px',top: '-60px',clip: 'rect(0, 160px, 45px, 80px)'}},
.
.
625:{src: 'M1.jpg',style: {left: '-440px',width: '800px',height: '135px',top: '-150px',clip: 'rect(90px, 480px, 135px, 400px)'}},
630:{src: 'M1.jpg',style: {left: '-520px',width: '800px',height: '135px',top: '-150px',clip: 'rect(90px, 560px, 135px, 480px)'}}});

Time value in minutes? 5 seconds equal 5: and 2 minute 30 seconds ????

My video lenght is 5 minutes 44 seconds
I would set thumbnails

video.thumbnails({
// 0 second
0: {
src: 'http://example.com/thumbnail1.png',
width: '120px'
},
// 90 seconds
90: {
src: 'http://example.com/thumbnail41.png'
}
// 1:20 seconds (120 works)
120 : {
src: 'http://example.com/thumbnail52.png'
}
// 2:30 (230 doesnt work)
230 : {
src: 'http://example.com/thumbnail124.png'
}

Please help
});

Still maintained ?

Hello everyone !

I have check the pull request and issues and I am wonder if the plugin is still maintained ?

I am happy to take a fork but I am not really good with JS ^^

so this is a call to everyone. I am happy to create a fork but I will need someone to help me.

Image blinking on firefox, it is ok on chrome

The plugin is blinking on Firefox (Windows and Linux).
but in chrome is very smooth .

Video js thumbnails not work with hls videos

when video is mp4 my vtt thumbnails on hover runs perfect but on my hls videos its not working

cdnjs hosting

Hi guys,

We want to host you library on cdnjs
The main contributor asked a question about author of this lib - who is really author that we can add to package json and use in cc tag
Thanks for your help

Video of 8 minutes progress bar only partitions for the first 20 seconds

When I have an 8 minute video and thumbnails in 5 second intervals. When you hover over the progress bar, it only covers 20 seconds of the video. So when I hover over the end of the video, it displays the thumbnail at 20 seconds into the video.

Videojs thumbnails does not work with Foundation

Today I found a strange issue when combining VideoJS and Foundation. When I included 2 Foundation CSS as below, the Videojs Thumbnails stopped working, no thumbnails were displayed.
<link rel="stylesheet" href="foundation-6.3.1/css/foundation.css"> <link rel="stylesheet" href="foundation-6.3.1/css/app.css">
I did a little check further and noticed that the plugin still requests the thumbnail images, it just not display on screen.

Images are showing at incorrect time on seekbar

I've been trying to use this plugin for displaying thumbnail images and i noticed that time in seconds configured is not actually matching the timestamp in seek bar for a given image. I tried removing "progressControl.el().offsetLeft" from the following line and then it seem to work correctly. Not sure if this is due to recent ControlBar changes in videojs. Without this "possible fix" i'm getting negative values for "mouseTime".

videojs-thumbnails/videojs.thumbnails.js

Line 152 in a3ac343

 mouseTime = Math.floor((left - progressControl.el().offsetLeft) / progressControl.width() * duration); 

Let me know if you need any more examples or details about this bug.

brightcove / videojs-thumbnails Goto Github PK

videojs-thumbnails's Introduction

Video.js Thumbnails

Using the Plugin

videojs-thumbnails's People

Contributors

Stargazers

Watchers

Forkers

videojs-thumbnails's Issues

Recommend Projects

Recommend Topics

Recommend Org