Development:In-browser video creation
From Door43
|
How this project could be used:
Mikhail wants to create a video of "The Compassionate Father" in Russian. The story has been translated, the images to be used are included in the text, and the audio has already been recorded and uploaded to Door43. Mikhail is logged in and is on the page with the Russian translation of the story. He clicks the "create a video" button which loads the video editing page.
On the video editing page, he can start from scratch or choose to use a template from other languages that have the video completed. He chooses to use a template from the English version of the video. The template is stored on the English version of the wiki (using interwiki links) and, when selected, pre-populates the video creation interface with the images that were used in the English video, based on their filenames.
Mikhail sees that the video editing engine already correctly selected the audio track to use with the video so he clicks "play" and starts listening to the story and watching the images as they pan and zoom. Mikhail makes adjustments as needed, according to the audio track that is being used. He drags the border between two images to the left or right, as needed, to match the image transition with the story in the audio. The pan & zoom effect adjusts accordingly and after a second pass through the video to check the settings, he clicks "render". A few minutes later, the video is finished and he is able to download it in different formats and resolutions.
Objective
Enable a user to easily create a simple video that includes only an audio track, a title clip (image), and "panning & zooming" images (aka "Ken Burns effect") from images and audio in Door43.
Technical considerations
Simplicity - the user interface needs to be very simple and clean.
Maximum accessibiliy - a pure javascript implementation (without flash) is ideal for use in a broader range of web browsers and mobile devices.
Other notes
- In addition to pre-populating the video template with the image names, the template also sets up the pan & zoom settings for each picture.
- The video settings should be stored (probably as XML) in a wiki page on Door43. When a user clicks "create a video", these settings should be loaded (if the page exists) or else the user should be prompted to start a new video - either based on the template for the same video in another language, or from scratch.
- The audio track should be selected based on the name of the story - if there is an exact match, it should be used by default, or else a search of the File: Namespace could be made for files with a similar name.
- Rendering is done by a process on the server, not in the browser. Only the interface is in javascript + HTML/CSS - the rendering will be done on the server, probably by ffmpeg. The configuration and settings for the transitions (in the XML config) can be accessed directly by accessing the "raw" link for the page. For instance, if the settings were at http://en.door43.org/wiki/VideoConfig then the raw content of the page (the XML) could be accessed directly at http://en.door43.org/w/index.php?title=VideoConfig&action=raw
- The "pan & zoom" effect needs to be based on percentages of time and screen size, not on actual time into the audio track or pixels. That is, "if the image is displayed for 5 seconds, at 0% of the time the image is displayed, the zoom should be 130% at point 82% (x axis), 71% (y axis)". This will make it so that the same settings can be re-used with different audio tracks in other languages, as well as for different rendering resolutions.
