title: Apply water ripple effect with JavaScript in HTML video player
body: <p>I am trying to create a <a href="http://www.learningjquery.com/2016/06/10-jquery-plugins-to-create-a-ripple-effect" rel="nofollow noreferrer">water ripple effect</a> in a video embedded in HTML5 default web player. </p>
  
  <p>I am doing it fine with using images and and a overlay canvas on top of it, but what I am trying to do now is to get single frames from a video and output it to a canvas every 1-5ms using <a href="http://www.kaizou.org/2012/09/frame-by-frame-video-effects-using-html5-and/" rel="nofollow noreferrer">this tutorial</a>.</p>
  
  <p>And I am stuck at this point, I can output frame into another canvas using<br>
  <code>canvas.toDataURL()</code> function.  </p>
  
  <p>I have seen advanced web-based video players that allow for applying Processing.js sketches on top of videos, would that be a good solution?</p>
  
  <p>My question is: what would be the best and most reliable solution for applying visual effects (water ripples in this case) using JavaScript to a video playing in HTML5 media player. </p>