npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

video-trimmer

v1.0.10

Published

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

756

Readme

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:

image

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

image

Trimmed video results:

image

Demo Link:

click here