Skip to main content

解决自动播放问题

浏览器对在没有用户交互的情况下播放音频的网站施加了限制。继续阅读，了解如何正确使用 Remotion Player，以避免遇到浏览器策略问题。

从用户事件触发播放​

不要在网站加载时自动播放音频，否则浏览器将阻止音频播放。相反，显示一个播放按钮或使用 controls 属性。

将事件传递给 play() 或 toggle() 方法​

播放必须从用户手势开始，例如鼠标点击。您应该从中获取一个类似 MouseEvent 的 Javascript 事件。将此事件传递给 play() 或 toggle() 函数，以便音频可以自动播放。

tsx
import { PlayerRef } from "@remotion/player";
import { useRef } from "react";
 
export const App: React.FC = () => {
  const ref = useRef<PlayerRef>(null);
 
  return (
    <button
      onClickCapture={(e) => {
        const { current } = ref;
        // Pass the event to .play(), .pause() or .toggle()
        current?.play(e);
      }}
    >
      Play
    </button>
  );
};
tsx
import { PlayerRef } from "@remotion/player";
import { useRef } from "react";
 
export const App: React.FC = () => {
  const ref = useRef<PlayerRef>(null);
 
  return (
    <button
      onClickCapture={(e) => {
        const { current } = ref;
        // Pass the event to .play(), .pause() or .toggle()
        current?.play(e);
      }}
    >
      Play
    </button>
  );
};
info

建议使用 onClickCapture 事件而不是 onClick 事件，以使事件传播在 Safari 中正常工作。

使用 numberOfSharedAudioTags 属性​

如果您的音频不会立即进入视频（例如视频的前几秒是静音的，然后音频淡入），那么它从技术上讲不是基于用户交互开始的。为了解决这个问题，您可以使用 numberOfSharedAudioTags 属性。这将在第一次与用户交互时播放一些静音音频，然后重用该标签来播放延迟的音频回放。

您可以拥有任意数量的静音音频标签。设置 numberOfSharedAudioTags={2} 来准备两个共享音频标签。请注意：如果您设置了这个属性，并且您渲染的 <Audio/> 多于共享音频标签的数量，将会抛出异常。

warning

由于我们这边的一个 bug，在 Remotion v3.1.5 之前，这个属性不起作用。升级以获得 bug 修复。

控制自动播放失败的行为v4.0.187​

如果浏览器因为视频有声音而阻止自动播放，视频将会被静音并将重试一次。
如果您想自己处理错误，您可以将回调传递给 <OffthreadVideo> 和 <Video> 的 onAutoPlayError 属性。