a tool to pick up the Color Value within any frame from a HTML5 Video . support both Vue.js and jQuery
Switch branches/tags
Nothing to show
Clone or download
Latest commit 19abb97 Nov 24, 2017
Permalink
Failed to load latest commit information.
demo update Nov 24, 2017
src update Nov 24, 2017
README.md Update README.md Nov 24, 2017

README.md

video-color-picker

a tool to pick up the Color Value within any frame from a HTML5 Video . support both Vue.js and jQuery

view demo

video resource used in this demo comes from threejs.org/examples/

noticed that your video resource host need to allow CORS , otherwise you cannot use getPixelColor on your canvas, and the project won't work.

use as jQuery plugin

var videoobj = $("#videodom").colorvideo({
	videoUrl: "https://threejs.org/examples/textures/sintel.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) {
          // if you need to get color data when mouseover, enable this
          // $("#colorrgb").html(colorData.rgb.toString())
          // $("#colorhex").html(colorData.hex)
          // $("#colorbox").css("background", colorData.hex)
	}
})

$("#playbtn").click(function() {
	videoobj.play()
})
$("#pausebtn").click(function() {
	videoobj.pause()
})

use as Vue component

<color-video
      videoWidth=480
      videoHeight=204
      ref="colorvideo"
      videoUrl='https://threejs.org/examples/textures/sintel.mp4'
      :autoplay=false
      @onVideoClick="myclickhandler"
      @onVideoHover="myhoverhandler">
</color-video>

methods:{
      playvideo(){
        this.$refs.colorvideo.$refs.myvideo.play()
      },
      pausevideo(){
        this.$refs.colorvideo.$refs.myvideo.pause()
      },
      myclickhandler: function (vcolor) {
      	// if you need to get color data when click, enable this
        // this.pickcolor=vcolor
      },
      myhoverhandler: function (vcolor) {
        this.pickcolor=vcolor
      }
}