ContextQMD
Back to Remotion

getGifDurationInSeconds()

packages/docs/docs/gif/get-gif-duration-in-seconds.mdx

4.0.4751.9 KB
Original Source

Part of the @remotion/gif package

<AvailableFrom v="3.2.22" />

Gets the duration in seconds of a GIF.

:::note Remote GIFs need to support CORS.

<details> <summary>More info</summary> <ul> <li> Remotion's origin is usually <code>http://localhost:3000</code>, but it may be different if rendering on Lambda or the port is busy. </li> <li> You can <a href="/docs/chromium-flags#--disable-web-security">disable CORS</a> during renders. </li> </ul> </details> :::

Arguments

src

A string pointing to a GIF asset

options?<AvailableFrom v="4.0.471" />

requestInit?<AvailableFrom v="4.0.471" />

Options that are passed to the internal fetch() call when loading the GIF. This can be used to pass credentials or headers for authenticated GIFs.

Remotion manages the internal signal option itself, so passing a signal in requestInit has no effect.

Return value

Promise<number> - the duration of the GIF in seconds, not factoring in that whether it is looped.

Example

tsx
import {useCallback, useEffect} from 'react';
import {staticFile} from 'remotion';
// ---cut---
import {getGifDurationInSeconds} from '@remotion/gif';
import gif from './cat.gif';

const MyComp: React.FC = () => {
  const getDuration = useCallback(async () => {
    const imported = await getGifDurationInSeconds(gif); // 127.452
    const publicFile = await getGifDurationInSeconds(staticFile('giphy.gif')); // 2.10
    const remote = await getGifDurationInSeconds('https://media.giphy.com/media/xT0GqH01ZyKwd3aT3G/giphy.gif'); // 3.23
  }, []);

  useEffect(() => {
    getDuration();
  }, []);

  return null;
};

See also