I am fan do handling codes raw and searching for solutions if there are no solutions while coding into projects. I am mostly stuck on single bit of code but always wanted to work on fun projects on free time which I get none now a days. But lately I got a full day of free time and signed up for Cluade.ai on free account. Then started a new project that I was eagerly wanting to develop. A video editor purely made in HTML, CSS, JS utilizing MediaRecorder on canvas. This is what I had idea for lately but would take me almost a week to complete the project. Then I wanted to test the free version of Claude project and started with a brief prompt on what I wanted.
|
1 2 3 4 5 6 7 8 9 10 11 |
I want to make a video editor on html, css, js(can use plugins) that fetches videos from Pexels and can merge the videos. Then export the combined videos as single. It's achievable via canvas on html5. Use any library needed. Primary focus on jQuery Software: * Allow select resolution on well know formats * Allow searching * Allow drag drop videos to/into frame from the search * Allow selecting video duration or cropping after adding to the frame * Allow export into webm when done Search: * Allow searching videos from Pexels.com api [https://www.pexels.com/api/documentation/#videos-search] * Allow selecting video/videos and appending. |
It generated the perfect UI along with 90% functionality already. There were some issues with the MediaRecorder for initial play, few regex bugs and some code minified bugs that needed to be fixed that was simple and could be fixed by just looking onto the code. Moreover there were some timeline issues that was fixed right after the prompt because of trim feature.
Then I seek to add more feature by adding/allowing a text block to the video and it generated the new feature quick. It did need to be prompted to make changes not only for the preview but also on export too.
Later on export I had issue if the memory or CPU is laggy, it doesn’t generate correct video length and after the correct prompt it generate the new export without any lag.
Try the editor here: Coolest HTML5 Online Video Editor
And guess what, it’s just single file with minimal dependencies. I have added few more features like remembering the API key for Pexels on localStorage. You can feel free to download the index.html and run on your own server without opening the url.
Happy Vibe Coding