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>
</div>

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>
</div>

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

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></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) {
      $("#colorrgb").html(colorData.rgb.toString())
      $("#colorhex").html(colorData.hex)
      $("#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() {
  videoobj.play()
})
$("#pausebtn").click(function() {
  videoobj.pause()
})

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.