videoタグの再生終了後にposter画像を表示させる方法｜HTML5, javascript
HTML5のvideoタグで動画を直接アップすることができますが、動画の再生が終わってからの処理でポスター画像に戻して欲しいというリクエストを受けました。
videoタグの属性では実装できません。
videoタグの属性一覧
・controls
・autoplay
・loop
・poster
・playsinline
・widthとheight
・preload
・muted
javascriptにて実装することになりました。
ポスター画像は動画のダウンロード中に表示される画像（動画が再生されない場合）に、その代わりとして表示させる画像となります。
それに加えてループ設定していると、ポスター画像も表示されるのですが、この特性を活かしました。
videoタグ側でloop設定するのですが、javascript側でループをストップさせます。
そうするとポスター画像が最後に表示されます。
HTML5
<video id="myVideo" controlls autoplay muted playsinline> <source src="hoge.mp4" type="video/mp4" /> </video>
javascript
let myVideo = document.getElementById("myVideo"); //videoのidを取得
myVideo.onended = function() {
myVideo.autoplay = false; //HTML5側でautoplayを設定しているのを停止することでポスター画像が最後に表示される
myVideo.src = "hoge.mp4"; //この動画設定をしないと上のautoplayが動作しないので記述しておく
myVideo.poster = "hoge.jpg"; //ポスター画像の設定
};
ポスター画像を使用せず動画内の指定した場所を最後に設定することもできました。
let myVideo = document.getElementById("myVideo"); //videoのidを取得
myVideo.onended = function() {
myVideo.currentTime = 4.5; //動画が終わってから4.5秒の場所に設定
};
