HTML5 Canvas Video Player & Drawing Overlays

This project received 20 bids from talented freelancers with an average bid price of $696 USD.

Get free quotes for a project like this
Project Budget
Total Bids
Project Description

Need a custom HTML5/Canvas video player with 2 modes:

Analyze Mode: An MP4/OGG video is loaded, and the user can draw lines and circles (from colors from a pre-set list) over the video as an overlay. Once done drawing, the overlay can be submitted to a webservice as a base-64 encoded image for storage and retrieval. The drawing overlay will remain static as the video plays underneath it.

Compare Mode: 2 MP4/OGG videos can be loaded and displayed side by side, each with their own playback controls. Not all videos will be the same duration.

For both modes, the user should be able to drag/scrub the playhead back and forth to view the videos, or step forward and backward frame by frame using the arrow controls on their keyboard. If possible, add controls for zooming and panning to specific areas of the videos.

The video controls must be completed within 7 days, and the drawing overlays completed the next 7 days.

This project will be ongoing, and may have additional requirements as integration with the server continues, but we'll negotiate additional costs as needed. It's most likely that a JS/jQuery AJAX request will be necessary to call a web service to display a list of available videos that the user can select to play (in either mode). More information on that will be available as the web service is developed, so we'll be working with hard-coded video paths for the initial project.

UI and interface designs/wireframes will be provided, along with necessary artwork.

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online