How can I detect when video Vimeo finished playing react?

Question

I add vimeo on a page as a link and try to use onEnded event but it doesn`t work. My code is here

const iframe = useRef(null)
const myCallback = () => (console.log('Video has ended'));
     <iframe
        ref={iframe}
        src='some-link'
        onEnded={() => myCallback()}          
      />

Cuold you please to advice me something that can help

Answer 1

I don't think a native iframe can detect the events from an embedded Vimeo video. You can refer to the official Vimeo Player API here. There are also existing React implementations of this if you opt for the component based approach.

import React from "react";
import Vimeo from "@u-wave/react-vimeo";

export default function App() {
  const myCallback = () => console.log("Video has ended");

  return (
    <div className="App">
      <Vimeo video="347119375" autoplay onEnd={() => myCallback()} />
    </div>
  );
}

CodeSandBox: https://codesandbox.io/s/so-react-vimeo-embed-6xt25
Reference: https://github.com/u-wave/react-vimeo