目次
HTMLのvideoタグのendedイベントが発火しなかったのでその原因を調査しました。
経緯：再生終了後、指定位置から繰り返して再生がしたい
動画の再生後、最初からではなく指定位置から動画を繰り返して再生をしたかったです。そこで、endedイベントを利用して、再生後に再生位置を設定したのですがうまく再生することができませんでした。今回は、5秒の動画で再生終了後に3秒から再生したいと思います。
endedイベントが発火しない実装例
export const Video1 = () => {
const refVideo = useRef();
useEffect(() => {
refVideo.current.addEventListener('ended', () => {
refVideo.current.currentTime = 2;
});
}, []);
return(
<video ref={refVideo} loop muted autoPlay playsInline>
<source src='/videos/count-down-5.mp4' type="video/mp4" />
</video>
)
}この実装方法では、endedイベントが発生しませんでした。どうやら、loop属性が付与されている場合は、endedイベントが発生しない仕様となっているようです。
endedイベントが発火する実装例
export const Video2 = () => {
const refVideo = useRef();
useEffect(() => {
refVideo.current.addEventListener('ended', () => {
refVideo.current.currentTime = 2;
refVideo.current.play();
});
}, []);
return(
<video ref={refVideo} muted autoPlay playsInline>
<source src='/videos/count-down-5.mp4' type="video/mp4" />
</video>
)
}loop属性が付与されていない場合、endedイベントが発生しました。そのため、再生後に、指定位置から繰り返して再生したい場合は、loop属性は設定せずに、イベント処理にて再生させてループさせます。
結論：再生後に、指定位置から繰り返して再生したい場合は、loop属性を外してendedイベントを活用すべし
探しても同様の記事がなかなか見つからなかったため、この記事がお役に立つと嬉しいです！