Skip to main content

useBufferState()

从4.0.111版本开始可用

您可以在您的组合中使用此钩子来检索可以通知播放器您的组件当前正在加载数据的函数。

MyComp.tsx
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 <></>;
};
MyComp.tsx
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​

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

delayPlayback()​

告诉播放器延迟播放，直到您调用unblock()。

使用说明​

处理卸载​

用户可能会寻找视频的不同部分，这些部分立即可用。
使用useEffect()的清理函数在您的组件卸载时清除处理。

❌ 与React严格模式冲突
tsx
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 <></>;
};
❌ 与React严格模式冲突
tsx
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()内调用​

虽然以下实现在生产环境中有效，但在开发中失败，如果您在React严格模式内部，因为useState()钩子被调用两次，导致缓冲的第一次调用永远不会被清除，视频将永远缓冲。

❌ 在寻找视频的不同部分时不清除缓冲处理
tsx
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 <></>;
};
❌ 在寻找视频的不同部分时不清除缓冲处理
tsx
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()一起使用​

delayRender()是一个在渲染过程中发挥作用的不同API。

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

同时使用delayRender()和delayPlayback()
tsx
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 <></>;
};
同时使用delayRender()和delayPlayback()
tsx
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 <></>;
};

参见​