Het zal na het lezen van mijn blogs over Video, CSS3 en mijn sessie op de DevDays 2011 duidelijk zijn dat ik behoorlijk onder de indruk ben van de vele mogelijkheden van HTML5. Ik ben dan ook regelmatig druk met het ontwikkelen van kleine webapplicaties om mijn kennis van HTML5 uit te breiden. Eťn van de applicaties die ik onlangs heb ontwikkeld is een coole clientside video-editing tool.

Het zal na het lezen van mijn blogs over Video, CSS3 en mijn sessie op de DevDays 2011 duidelijk zijn dat ik behoorlijk onder de indruk ben van de vele mogelijkheden van HTML5. Ik ben dan ook regelmatig druk met het ontwikkelen van kleine webapplicaties om mijn kennis van HTML5 uit te breiden. Eťn van de applicaties die ik onlangs heb ontwikkeld is een coole clientside Video editing tool.
De technieken
Een aantal onderwerpen die ik graag wilde onderzoeken waren de aansturing van video vanuit Javascipt, interactie en animeer technieken voor het canvas, exporteren van het canvas en de Local Storage. Laat ik beginnen met te vermelden dat design niet mijn sterkste kant is en dat ik ook geen enkele poging gedaan heb om het optisch mooi te maken! Tevens is het echt als “proof of concept” bedoeld, dus niet 100% klaar voor productie. Klik hier voor het resultaat.
Video editor in HTML5
Editor mogelijkheden
De tool kan het volgende:
  • Selecteer een video fragment om te bewerken (uploadmogelijk ontbreekt, maar is uiteraard bij te bouwen).
  • Bekijk de video (HTML5 Video element).
  • Gebruik de “custom slider” om door de tijd heen scrollen (Canvas & Javascript om video te manipuleren).
  • Gebruik de yogshuttle om gedetailleerd op zoek te gaan naar ene bepaald frame in de video (Canvas & Javascript om video te manipuleren).
  • Je kunt ook een zwengel aan de yogshuttle geven zodat hij nog even door draait (Canvas).
  • Het zetten van in- en outpoints. Dit vormt het “nieuwe fragment”.
  • Een fragment kun je opslaan (Local Storage en image export van Canvas).
  • Je kunt meerdere fragmenten toevoegen en krijgt een overzicht hiervan (Local Storage).
  • Het afspelen van de nieuwe video (vorm van double buffering met HTML5 Video i.c.m. Javascript).
Documentatie
In dit artikel zal ik verder geen uitleg geven over hoe en wat. De code kun je uiteraard gewoon bekijken en die heb ik voorzien van commentaar. Overigens heb ik alleen MP4 video bestanden gebruikt, dus niet alle browsers zullen hier (nog) mee om weten te gaan. IE9 en Chrome zijn daarom waarschijnlijk de slimste keuzes om deze case te bekijken.