CODEWITHSUNDEEP
reactjsiframe
K.S
K.S

Reputation: 463

How to detect Iframe video has ended in reactjs

How can I detect that the iframe playing video has ended suppose I have below iframe 

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

here, I want to call a function when this video ended. How can I achieve this. Your help would be great for me Thanks,

Upvotes: 1

Views: 1904

Answers (2)

avinash sinha
avinash sinha

Reputation: 1

you can use react-player it is far better for implementation than Vimeo. It can take any type of URL and have onEnded attribute readily available.

**npm install react-player**

import ReactPlayer from 'react-player'

// Render a YouTube video player

 <ReactPlayer playing muted onEnded={callBack}  width="450px" height="100%" url='https://www.youtube.com/embed/_Z8RKEyda2w' />

package details can be found here for react-player

Upvotes: 0

Steve
Steve

Reputation: 8809

Use the Vimeo Player API.

npm i -S @vimeo/player

Simple Vimeo player component:

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}
        />
    );
}

Usage example:

<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...
    }}
/>

Upvotes: 2

Related Questions