My friends, my life, my style - James S.F. Hsieh


HTML5 Video Render Engine

It is a web video render engine based on HTML5 and WebGL. It provides timeline, tracks, clips, programmable animation (key-frame) and video effects for user to compose a video project. A video project of output is a small JSON file (10~50KB). Engine can compose videos, images, audios and texts according to the project file in time. The media source can be a YouTube online video, an image in Picasa web, or a MP3 audio in the cloud etc. JVRE provides APIs to edit a video project based on online resources such as YouTube videos or Picasa images. The editing result likes a “playlist”, and it can be persisted to a JSON structure. JVRE can accord to the editing result to composite visual and auditory output on-the-fly with online resources. I designed and implemented whole engine.

Give a general application, a web-site provides video editing service based on JVRE. User can create/edit/playback his video project in the browser. The project file (a JSON structure) can be store in server for next playback or editing. JVRE also supports primary features such as:
 Support multiple layers called tracks in timeline
 Track has multiple clips; it supports Transformation and Effects.
 Clip is a playlist of one resource; it supports Transformation and Effect.
 Source of clip can be a video, an audio, an image, or a title.
 Title supports multiple texts and Transformation.
 Effects implement with WebGL pixel-shader, it can leverage GPU.
 User can edit timeline without pause playback.
 Engine supports delay-loading and pre-loading videos to reduce latency.
 Implement key-frame architecture for animations; the interpolation algorithm of key-frame is extendable.
 Support hit-test for editing and interaction.