I need someone to develop the JQuery / Ajax / CSS / HTML portion of a video editor.
What I would like in the end is a friendly interface for someone to build a video with, and then when saved have the timeline put into a request and sent to a PHP page so I can save the timeline.
I will want to also be able to load a timeline, for users that come back to edit the video they just saved.
I want basically the following
1. Timeline will have a max time of the song / audio file they upload. So when the page starts, they would have already uploaded a song, if it's 5 minutes and 12 seconds, the entire timeline will be representative of that time.
2. There will be a collection of "Video Clips" , that will have time lengths also, some may be 2 seconds, others 2 minutes, but all will be displayed in a 64x64 thumbnail gallery with some basic details as shown in the image.
3. Users can drag a "Video Clip" from the gallery, and drop it on the timeline, in between the elements where a user drops it. So if I have 5 clips on the timeline, and I drag a new clip from the gallery in between 4 and 5, clip 5 becomes 6, new clip becomes 5, and rest stay the same, so sorting is displayed properly. The clips when dragged will have the width relative to the length of the clip, so longer clips have higher width on timeline, but match time wise to the timeline's max time.
4. Users can scale clips on the timeline , and it will remember X% of the original scale, so if a user drags a 1 minute clip, and then scales it to 1:30 , it will remember 150% for that clip, and remember the sort order.
5. The output I get in PHP must be a multi-dimensional array of clip[id][timeScale] = 100%;clip[id][timeScale] = 150%;clip[id][timeScale] = 10%;
Where clip ID is relative to the ID in the Video Gallery on the bottom of the page that they dragged the clip from.
6. If a user scales a clip too large, it will prevent them from scaling further. So it will have a max width directly associated with the global time limit which is determined by the audio file they uploaded (I can provide raw time length of audio file and handle upload etc).
7. When clips are dragged to the timeline, they must scale (width wise) to the proper width of the video clip's length compared to the length of the audio timeline max size, so the clip when played back would be the proper length in comparison to the audio peaks.
What I am Looking For: I want a single [url removed, login to view] file with accompanying .css, .js and any images for styling of the interface
The [url removed, login to view] will post to a PHP file, say [url removed, login to view], that contains all of the timeline editing.
The [url removed, login to view] must have a way for me to "Load" the users previous projects onto the timeline if they have one, so I must be able to provide the same array structure back to it for loading old projects.
The videos "Play" button does not have to do much, simply be clickable so I can add a modal window with a video preview, or have a modal window over the thumbnail play it, I just want them to be able to see the videos before they drag them to the timeline.
I am not looking for PHP upload code for the audio, I can handle that, I am not looking for PHP code handling the array and storing the data or anything, I can handle that.
What I can't do is get FLOAT: Left div tags to not break to the next row on the timeline, and limit to X width of the timeline, and I can't figure a way to easily scale the clip to the right size width on the timeline relative to the clips size and the audio timeline's size.
The clips MUST match the width of the video gallery item, because they will be used to render a seamless video. There can be no room for 0.01+ second gaps, it has to be perfect so the videos flow smoothly into one another when the time codes are all put together in the final video program.
The preview image I created can be seen at [url removed, login to view]
If you have any questions, PLEASE ASK!
4 freelancer đang chào giá trung bình $311 cho công việc này
I'm a US developer with extensive JQuery experience. I can do this for you, but it will only support more recent browsers (ie no IE6 support, etc). Thanks!