動画をクリックして再生し、再生終了後にページ内遷移を行いたい

HTML

<div class="fv">
      <div class="detail-wrap">
        <video id="detail" src="img/detail1.mp4" muted playsinline　poster="img/circle.png"></video>
        <div class="detail-btn" id="detail-btn"></div>
      </div>
</div>

<div class="portfolio">
?
?
?
?
</div>

js(画像で置き換え時)

  $(".portfolio").css("display", "none");

  $("#detail").click(function () {
    $(".fv").css("display", "none");
    $(".portfolio").css("display", "block");
  });

js(動画再生、停止ボタン)

　const video = document.querySelector("#detail");
  const video_btn = document.querySelector("#detail-btn");
  let is_playing = false;

  video_btn.addEventListener("click", () => {
    if (!is_playing) {
      video.play();
      is_playing = true;
    } else {
      video.pause();
      is_playing = false;
    }
  });

上記のような構成のポートフォリオサイトを作成演習しております。
画像(detail)をクリックするとfvが隠れportfolioが表示されるのですが,この画像部分を動画にし、再生終了した際にportfolioが表示されるようにしたいです。

現在クリックしたときに動画を再生や停止を行うjsは記述してあるものですが、そのコードはただ動画の再生と停止のみなのでportfolioセクションに移動することはありません。
これをクリックしたときと同じようにportfolioセクションに移動させたい場合はどのようなjsを記述する必要があるのか教えていただきたいです。

m.ts10806

2020/12/02 07:36

再現確認に必要なコードがほとんどないのでどう実装して再生停止を実現しているのか知らないですが、「再生終了」イベントがとれるか調べてみましたか？

_mini

2020/12/02 07:40

動画再生のjsも追記いたしました。このコードは動画部分をクリックして再生、停止を行うだけなので再生終了イベントは取れていないと思います。

m.ts10806

2020/12/02 07:51

書かなければ取れないのは当たり前と言えば当たり前なので、調べてみたかどうかを確認しています。

m.ts10806

2020/12/02 07:52

「JavaScript 動画終了時」で結構出てきますね。適用できるかはやってみてください。

_mini

2020/12/02 07:53

video.addEventListener("ended", () => {}を使用して画像をクリックした際に発火するjsを記述してみましたがなにも変化は起きませんでした。

m.ts10806

2020/12/02 08:02

処理をどう書いたのでしょうか。 endedが起きたかどうかデバッグはされましたか？

_mini

2020/12/02 08:45

video.addEventListener("ended", () => { $(".fv").css("display", "block"); $(".portfolio").css("display", "none"); console.log( "1）動画が終了した、または 2）それ以上データがない" + "ため、動画が停止しました。" ); });

_mini

2020/12/02 08:46

画像で置き換え時と同じものとconsole.logを表示させました。 console.logは動いていましたが、上のCSSは作動しません。