useBufferState()

可从4.0.111获取

🌐 available from 4.0.111

你可以在你的组合中使用这个钩子来获取函数，以通知播放器你的组件当前正在加载数据。

🌐 You can use this hook inside your composition to retrieve functions that can inform the Player that your component is currently loading data.

MyComp.tsx
import React from 'react';
import {useBufferState} from 'remotion';

const MyComp: React.FC = () => {
  const buffer = useBufferState();

  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();

    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);

    return () => {
      delayHandle.unblock();
    };
  }, []);

  return <></>;
};

应用编程接口

🌐 API

返回一个带有一个方法的对象：

🌐 Returns an object with one method:

delayPlayback()

告知播放器在你调用 unblock() 之前暂停播放。

🌐 Tells the Player to delay playback until you call unblock().

使用说明

🌐 Usage notes

处理卸载

🌐 Handle unmounting

用户可能会跳到视频的其他部分，该部分可以立即访问。
在组件卸载时，使用 useEffect() 的清理函数来清除句柄。

❌ Causes problems with React strict mode
import React, {useState} from 'react';
import {useBufferState} from 'remotion';

const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥

  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);
  }, []);

  return <></>;
};

避免在 useState() 内部调用

🌐 Avoid calling inside useState()

虽然以下实现可以在生产环境中工作，但如果你处于 React 严格模式下的开发环境中，它会失败，因为 useState() Hook 会被调用两次，这导致缓冲区的第一次调用永远不会被清除，视频会一直缓冲。

🌐 While the following implementation works in production, it fails in development if you are inside React Strict mode, because the useState() hook is called twice, which causes the first invocation of the buffer to never be cleared and the video to buffer forever.

❌ Doesn't clear the buffer handle when seeking to a different portion of a video
import React, {useState} from 'react';
import {useBufferState} from 'remotion';

const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [delayHandle] = useState(() => buffer.delayPlayback()); // 💥

  React.useEffect(() => {
    setTimeout(() => {
      delayHandle.unblock();
    }, 5000);

    return () => {
      delayHandle.unblock();
    };
  }, []);

  return <></>;
};

与delayRender()一起

🌐 Together with delayRender()

[delayRender()](/docs/delay-render) 是在渲染过程中使用的不同 API。

如果你正在加载数据，你可能希望在渲染期间延迟截图你的组件，并在预览期间启动缓冲状态，在这种情况下，你需要同时使用这两个 API。

🌐 If you are loading data, you might want to both delay the screenshotting of your component during rendering and start a buffering state during Preview, in which case you need to use both APIs together.

Using delayRender() and delayPlayback() together
import React from 'react';
import {useBufferState, delayRender, continueRender} from 'remotion';

const MyComp: React.FC = () => {
  const buffer = useBufferState();
  const [handle] = React.useState(() => delayRender());

  React.useEffect(() => {
    const delayHandle = buffer.delayPlayback();

    setTimeout(() => {
      delayHandle.unblock();
      continueRender(handle);
    }, 5000);

    return () => {
      delayHandle.unblock();
    };
  }, []);

  return <></>;
};

兼容性

🌐 Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio
			No-op	No-op

另请参阅

🌐 See also

• 缓冲区状态