"Glitch in Yahoo Gifshot JavaScript causing issues with frame numbering

I have been using the Yahoo gifshot library to generate gifs from videos. A user uploads a video, and I use this library to dynamically create a gif from that video. However, the issue arises when a user uploads a two-second video but the resulting gif is only saved as one second in duration...

Here is the code snippet:

gifshot.createGIF({
                'video': [U + 'Content/convertedVideos/bla.mp4'],
                'gifWidth': 800,
                'gifHeight': 400,
                ...

I tried adding the numframes property, which seemed to work fine. But now, another problem has surfaced where it displays both the one-second gif followed by the two-second gif...

Updated code:

'video': [U + 'Content/convertedVideos/bla.mp4],
            'gifWidth': 800,
            'gifHeight': 400,
            'numFrames': 20,

See the image here: https://i.sstatic.net/Qg4En.gif

Upon loading, the first shows a one-second gif and then transitions to the two-second gif. How can I save only a two-second duration gif? Any assistance would be greatly appreciated. Apologies for any language mistakes.

Answer №1

I encountered a similar issue and managed to resolve it by cutting down 1 or 2 frames from the video.

For a video duration of 2 seconds, which equals 2000 milliseconds and approximately 20 frames in theory, the recommended numFrames should be adjusted to 18 frames after subtracting 2.

Additional Details:
// The designated number of frames for generating the animated GIF
// Note: Each frame is captured at intervals of 100 milliseconds for videos and every millisecond for images already in existence
'numFrames': 10,

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Both of the radio buttons in Material-UI have been selected

I have a unique document that showcases an implementation of RadioGroup, FormControlLabel, and FormControl. Take a look at the code snippet below for reference. import React from 'react'; import PropTypes from 'prop-types'; import Radio ...

"Encountered a 400 Bad Request error while attempting to retrieve data from Spring Boot using

I am attempting to remove an entity using a specified ID, but I encountered a 400 bad request error when trying to fetch from my API. async deleteFood(foodId) { const params = { 'id' : foodId } const rawResponse = await fe ...

The execution of the HTTP request is not happening

As a newcomer to JS and Node, I am attempting to display a JADE view using JSON obtained from a REST API. Everything works perfectly when I run the http.request on its own, but as soon as I introduce modules and rendering statements, the http request funct ...

What is the best way to monitor parameter changes in a nested route?

I need assistance with managing routes const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'explore', component: ExploreComponent, children: [ { path: '', component: ProductListC ...

Learn how to display a web page in a tab view similar to the toggle device toolbar option

Is it possible to simulate the toggle device toolbar of a web page using JavaScript? https://i.stack.imgur.com/M9oB0.png For example, can we set up a webpage to always display in tab or mobile view like on YouTube? ...

Tips on deleting specific elements from an array by utilizing the splice method

Here are the details of my first array: [ { members: [ '60ee9148104cc81bec3b97ab' ] } ] And this is the second array: [{"_id": "60ee9148104cc81bec3b97ab","username": "user1", "email": "< ...

Setting up route handlers in Node.js on a pre-initialized HTTP server

Is there a way to add route handlers to an http server that is already instantiated? Most routers, including express, typically need to be passed into the http.createServer() method. For instance, with express: var server = http.createServer(app); My r ...

Creating a compact HTTP server in c/c++ and incorporating AJAX capabilities into it

Creating a dynamic webpage that can automatically update information is my goal. I've managed to establish a socket and send HTML and Javascript files from my c/c++ application to the browser. However, now I'm stuck on how to proceed. How do I p ...

Is there a way to sort through objects in a JSON file using two shared values? Specifically, I'm looking to filter the JSON objects based on both common x and y values

Given a JSON file, I am looking to group objects based on common x and y values. Essentially, I want to group together objects that share the same x and y properties. Here is an example of the JSON data: let data = [{ "x": "0", "y& ...

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

I'm working on developing a scroll feature that operates independently from the main window's scrolling function. I aim to trigger specific events in the primary window based on interactions with this separate scrollbar. The only solution I coul ...

Express and Webpack Error: "SyntaxError: Unexpected token <"

I am facing difficulties while testing my React webpage that I built using Webpack. When trying to run an Express server, the localhost page appears blank with a console message saying Uncaught SyntaxError: Unexpected token <. It seems like the webpage ...

What is the best way to apply lodash's max function to a jQuery array?

I'm having trouble extracting the maximum number of rows from two tables. My variable maxRows ends up being a tbody jQuery element instead of the actual maximum value. I've experimented with both the pluck syntax and the long form, but both metho ...

Enhancing user experience with dynamic element integration in jQuery's AutoComplete feature

In order to fulfill my requirement, I need to display a few options when the user enters at least three characters in one of the input fields, which may be added dynamically as well. Since the data is extensive, I am unable to load it at the beginning of ...

Tips for executing a function in the HC-Sticky plugin?

Currently, I am utilizing the HC-Sticky JavaScript plugin and endeavoring to utilize the documented reinit method. However, I am facing difficulty in understanding how to execute it. In this CodePen demo, a basic setup is displayed along with an attempt t ...

How to insert a span element within a link tag in Next.js/React.js

Looking to create a breadcrumb using microdata in a Next.js and React.js project. Initially, I tried the following: <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem"> <Link href={'/index&a ...

Ways to remove unnecessary spaces from a JSON Object

I have a generic ajax.post method that takes in data from a function parameter. I'm looking to trim the data properties within the function. Here's the current code snippet: function PostToServer(options) { var defaults = { 'url ...

What is the proper way to implement the .render and .animate functions within an object class?

After seven days of searching for a solution, I am determined to create a simple game by calling for an Object. My vision is to develop a modular game structure, starting with the scene in the usual way: main.js: var scene, controls, camera, renderer; v ...

Split an array of simple data types in JavaScript into separate sections

Is there a way to divide an unordered array of primitive types into specific segments like this: var array = [102,103,104,201,203,204,303,301,302,405,406,408,101]; => newArray = [[101,102,103,104],[201,203,204],[303,301,302],[405,406,408]] The divi ...

The left-hand operator in Typescript is not valid

I am a beginner in typescript and I have been following a tutorial called Tour of Heroes on Angular's website. In the final chapter of the tutorial, when I tried to use HTTP with the provided code, everything seemed to run fine but I encountered an er ...

Encountering difficulty in assigning the desired value to the select box

// updating the subType value in the controller $scope.newEngagement.subType = 3; // creating a list of engagement subTypes $scope.engagementSubTypeList = [ { "subTypeId": 1, "subTypeName": "value1" }, { "subTypeId": 2, "subTypeName": "value2" }, { " ...