Video highlight

jQuery plugin which recognize the dominant color of video.

Example

Single color: http://andychups.ru/examples/fitandhighlight/

Several colors: http://andychups.ru/examples/fitandhighlight-gradient/

How to use

<h1 id="color-title">Color title</h1>

<video id="js-video-1" class="js-video" data-videohl-timeupdate="50" data-videohl-gradient="true" width="1280" height="720" preload="auto" loop="loop">
    <source src="video/video1.webm" type="video/webm" />
    <source src="video/video1.mp4" type="video/mp4" />
</video>

<video id="js-video-2" class="js-video" width="1280" height="720" preload="auto" loop="loop">
    <source src="video/video2.webm" type="video/webm" />
    <source src="video/video2.mp4" type="video/mp4" />
</video>

<button id="kill-video-2">Kill! Kill! Kill!</button>

var $videos = $('.js-video');
var $video1 = $('#js-video-1');
var $video2 = $('#js-video-2');

$videos.videoHighlight();

$video1
    .on('videohl-update', function (e, from, to) {
        var pattern = 'linear-gradient(to bottom,  rgba(fromR,fromG,fromB,1) 0%, rgba(toR,toG,toB,1) 100%)';

        pattern = pattern.replace('fromR', from[0]);
        pattern = pattern.replace('fromG', from[1]);
        pattern = pattern.replace('fromB', from[2]);
        pattern = pattern.replace('toR', to[0]);
        pattern = pattern.replace('toG', to[1]);
        pattern = pattern.replace('toB', to[2]);

        $('#color-title').css('background', pattern);
    });

$video2
    .on('videohl-update', function (e, r, g, b) {
        $('#color-title').css('color', 'rgb('+r+', '+g+', '+b+')');
    });

$('#kill-video-2').on('click', function () {
    var api = $video2.data('videohl-api');
    api.getTimeUpdate(); // 300
    api.setTimeUpdate(1000);
    api.getTimeUpdate(); // 1000
    api.destroy(); // See you later, alligator
});

API

api.getTimeUpdate()

api.setTimeUpdate()

api.destroy()