如何检测Iframe视频已在reactjs中结束

Question

假设我有下面的iframe，我怎么能检测到播放视频的iframe已经结束

<iframe title="vimeo-player" src="https://player.vimeo.com/video/185829586" width="640" height="360" frameborder="0" allowfullscreen></iframe>

在这里，我想在视频结束时调用一个函数。我如何才能做到这一点。你能帮我就太好了，谢谢，

Answer 1

使用Vimeo Player API。

npm i -S @vimeo/player

简单的Vimeo播放器组件：

function VimeoPlayer({
    onEnded = () => {},
    ...attrs
}) {
    const ref = useRef(null);

    useEffect(
        () => {
            const player = new Vimeo.Player(ref.current);

            player.on('ended', onEnded);

            return () => {
                player.off('ended', onEnded);
            };
        },
        []
    );

    return (
        <iframe
            ref={ref}
            {...attrs}
        />
    );
}

使用示例：

<VimeoPlayer
    title="vimeo-player"
    src="https://player.vimeo.com/video/185829586"
    width={640}
    height={360}
    frameBorder="0"
    allowFullScreen
    onEnded={() => {
        // Do something here when the video ends...
    }}
/>