<video>タグの再生終了後にポスター画像を再表示する
ビデオが終了した際にendedイベントが発火し、this.load()を呼び出すことでビデオをリロードし、ポスター画像を再表示します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Video Poster Example</title> </head> <body> <video id="myVideo" width="600" poster="poster.jpg" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <script> document.getElementById('myVideo').addEventListener('ended', function() { this.load(); // ビデオをリロードしてポスター画像を再表示 }); </script> </body> </html>