動画に時間指定で画像を挿入させたいです。

前提・実現したいこと

ドローンの撮影映像に地点名を表示したり、非表示にしたりする方法を探しています。
HTML・CSSはやったことあるのですが、JavaScriptは初心者のためよくわかっていません。

発生している問題・エラーメッセージ

問題点がいくつかあります。
動画を再生後、指定の時間になったら地点名を表示、画面から外れたら非表示にすることをしたいのですが、
コントロールバーをいじると表示非表示が崩れてしまいます。
ボタンのあり・なしを押して切り替えたいのですが、指定の時間の範囲だけ表示を実現するにはどうすればいいでしょうか？

該当のソースコード

HTML
1    <body>
2        <div>
3            <div id="video-btn" onclick="showbox()"><p>あり</p></div>
4            <div id="video-btn2" onclick="hidebox()"><p>なし</p></div>
5            <div id="station"></div>
6            <video id="v" src="" controls="" controlslist="nofullscreen" disablepictureinpicture autoplay playsinline loop></video>
7            <a href="" class="btn btn--orange">もどる</a>
8        </div>
9            <script>
10                function hidebox(){
11                  document.getElementById("station").style.display = "none";
12                  }
13                  function showbox() {
14                  document.getElementById("station").style.display = "block";
15                  }
16                  window.onload = function(){
17                  showbox();
18                  };
19
20                    var media = document.getElementById("v");
21                    function f(e) {
22                    if (media.currentTime >= 165) {
23                        document.getElementById("station").innerHTML="<img src=''>";
24                        document.getElementById("station").style.animation="anim 15s"
25                        media.removeEventListener("timeupdate", f, false);
26                    }
27                }
28                media.addEventListener("timeupdate", f, false);
29          </script>
30    </body>
31