video-trimmer

v1.0.10

Published

9 days ago

Video Trimmer is designed to allow users to upload a video, add trim markers within the video, and then trim it. After trimming, users can obtain the trimmed video segments.

Downloads

744

0High
0Medium
0Low

mauryasoni2201

video trimming ffmpeg filepond drag-and-drop-files

VideoTrimmer

Video Trimmer is designed to allow users to upload a video, add trim markers within the video, and then trim it. After trimming, users can obtain the trimmed video segments.

Description

The video trimmer is designed to simplify the video editing process.It allows users to return to the editing interface at any time to make further adjustments to their videos. Before finalizing cuts, users can preview the specific segments they wish to trim, ensuring everything is accurate and just right. Once satisfied with the edits, downloading the trimmed videos directly to their devices is quick and easy. Users can place trim markers on the video timeline to highlight the exact points where they want to make cuts, and if adjustments are needed, removing these markers is a straightforward process. Additionally, the tool provides the option to delete any trimmed videos that are no longer needed. With these features, the video trimmer streamlines the editing experience, allowing users to create polished videos with minimal hassle.

Features include

Back to Edit: It allows returning to the editing interface to make further adjustments to the video.
Preview Selected Segment: It allows previewing the specific segment selected for trimming, ensuring accuracy before finalizing the cut.
Download: It allows downloading the trimmed videos directly to the device.
Add Trim Markers: It allows placing trim markers on the video timeline to specify where to cut the video.
Remove Markers: It allows easily removing trim markers if adjustments are needed.
Remove Trimmed Video: It allows deleting trimmed videos.

Packages Used

ffmpeg

Purpose: Video Trimming
Description: Utilizes ffmpeg.wasm to enable efficient video trimming directly in the browser.This package allows users to specify start and end points for their video, ensuring they can easily create clips from longer videos.

FilePond

Purpose: File Uploading
Description: Implements drag-and-drop file uploads for a seamless user experience. FilePond supports various file types, allowing users to view file previews and receive feedback during the upload process.

Installation and Usage

To get started with the Video Trimmer, you can easily install it using the following command:-

npm i video-trimmer

From this package, you will receive an exported class that enables you to pass to arguments:

new VideoTrimmer('.trimmer','url');

The first argument, '.trimmer', is a selector that identifies the specific DOM element where the Video Trimmer will be applied,ensuring that it is the only one of its kind on that page.
The second argument, 'url', is the backend URL where you want to store your trimmed video.

Integrating the Package into Your HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Trimmer</title>
    <link rel="icon" href="#"/>
</head>
<body>
    <div class="video-trimmer"></div>
    <script src="./node_modules/video-trimmer/dist/coi-serviceworker.js"></script>
    <script type="module">
    import VideoTrimmer from "./node_modules/video-trimmer/dist/main.js";
    const video = new VideoTrimmer('.video-trimmer','http://localhost:3000/api/files');
    </script>
</body>
</html>

Screenshots:

Upload your video by manually selecting it or by using drag and drop option:

Select the video part which you want to trim with the help of marker and then click on trim video:

Trimmed video results:

Demo Link:

click here