【javascript】動画の終了時に画像を表示する〜videoタグ

はじめに

やりかたわからなかったのでメモ
やりたいことはvideoタグで再生した動画が終了したら画像を表示するだけ
(posterの終了後みたいなイメージ)

video.load()しなおせばposterが再表示されるようなのでこれ使えばやろうと思えばできそうだった。
けど、loadで動画ファイル自体再読み込みされてしまったら困るので別の方法考える(通信量を増やしたくなかった)

実装

結局なんの工夫もないけど、videoタグとは別にimgも用意しておいて動画終了したら
videoを非表示、imgを表示という形で実装した

<div id="video"></div>
<script>
var target = document.getElementById("video");
var video = document.createElement("video");
video.src = "動画のURL";
video.style.width = "100%";
video.autoplay = true;

var img = document.createElement("img");
img.src = "画像のURL";
img.style.width = "100%";
img.style.display = "none";

video.addEventListener("ended", function() {
  video.style.display = "none";
  img.style.display = "block";
});

target.appendChild(video);
target.appendChild(img);
</script>

もっと上手いやり方ありそうだけどとりあえず今回はこれで

以上です