Users can create drawings on videos to specify or highlight areas that particular comments refer to. A canvas holds these user drawings which then overlay videos. Drawings are shown at a fixed time in the video so each canvas needs an associated video and a playback time point indicating its position. Canvases can also have user comments and discussions associated with them.
Drawings can be created on top of videos by using the HTML5 'canvas' element. These drawings can be submitted for saving as attachment64 by calling the toDataURL() method on it. Make sure the dimensions of drawings match the size of the video (whether standard size or HD). One way you can do this is by sizing the canvas element (which users draw on) to match the video size. Check the HTML5 documentation on the canvas element for more information.
When saving a canvas, there are three required parameters that should be submitted as a POST request:
An example follows:
// a canvas element for drawing on, with z-index set to be above a video:
<canvas id="my_canvas" style="position: absolute; z-index: 1000;" height="443" width="640"></canvas>
var user_drawing = document.getElementById('my_canvas');
// once drawing is complete, you can convert it into a format easily sent to VidPrep's servers:
attachment64 = user_drawing.toDataURL();
Head Up! Remember to account for the size of the video controls when determining the drawing canvas dimensions. This ensures that drawings don't accidentally get drawn over the controls.
In addition to the required parameters, there are optional ones which can be submitted when creating canvas drawings. These values will be saved with the video and can be useful when displaying comments or threaded discussions with the videos.
Permanently remove videos through the API.
When deleting canvases, please be sure to have some form of confirmation interface on your end before submission to prevent accidental deletion.
To delete a canvas, submit a REST delete request with the following parameters:
These parameters are required and must match with the stored canvas for successful deletion.