Canvas Based Video Color Picker Plugin With jQuery

File Size: 7.12 KB
Views Total: 1495
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Canvas Based Video Color Picker Plugin With jQuery

A jQuery and HTML5 canvas based video color picker which enables the user to select a color and get the Color Code of a pixel of any HTML5 video you specify.

How to use it:

1. Create a container to place your HTML5 video.

<div id="videodom"></div>

2. Create controls to play and pause the HTML5 video.

<div class="controls">
  <a id="playbtn">PLAY</a>
  <a id="pausebtn">PAUSE</a>

3. Create the html to display the results (selected color and Html color codes).

<div class="results">
  <div class="color-box" id="colorbox"></div>
  <div class="color-value">
    RGB:<span id="colorrgb">rgb:(-,-,-)</span>
    HEX:<span class="hex" id="colorhex">hex:#---</span></div>

4. Place jQuery JavaScript library and the Video Color Picker's script at the bottom of the web page.

<script src=""></script>
<script src="color-video.js"></script>

5. The example JavaScript to activate the video color picker.

var videoobj = $("#videodom").colorvideo({
    videoUrl: "1.mp4",
    videoWidth: 480,
    videoHeight: 204,
    onVideoClick: function(e, colorData) {
      $("#colorbox").css("background", colorData.hex)
    onVideoHover: function(e, colorData) {
      // $("#colorrgb").html(colorData.rgb.toString())
      // $("#colorhex").html(colorData.hex)
      // $("#colorbox").css("background", colorData.hex)

$("#playbtn").click(function() {
$("#pausebtn").click(function() {

6. All default options of the video color picker.

  'videoUrl': '',
  'videoWidth': 0,
  'videoHeight': 0,
  'loop': 1000,
  'autoplay': true,
  'muted': false,
  'validate': true,
  'onVideoClick': null,
  'onVideoHover': null,

This awesome jQuery plugin is developed by wendychengc. For more Advanced Usages, please check the demo page or visit the official website.