HTMLでの動画 ⇒ 画像の切り替えについて

webページ上で何かキーが押されたときに、動画⇒画像に切り替わる仕組みを作りたいです。

最初に画像を表示し、「１」や「２」などのキー入力をすると、画像が切り替わるというものは作ることができました。

今度は最初に開いた際は動画が再生され、キー入力をすると、動画が画像に切り替わるというものを作りたいです。

現状、以下のコードでやってみたところ、
キー入力をした際に、動画のメディアプレイヤーが残ってしまい、画像が上手く表示されませんでした。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>video to image</title>
6  </head>
7      <body>
8        <video id="videochange" src="動画の名前"  height="433" controls autoplay playinline loop></video>
9      <script>
10        const list = {
11           ,50:"画像１"
12           ,51:"画像２"
13           ,52:"画像３"
14           ,53:"画像４"  
15           }
16
17           //なにかキーが押されたとき、keydownfuncという関数を呼び出す
18           addEventListener( "keydown", keydownfunc );
19           
20           //キーが押されたときに呼び出される関数
21           function keydownfunc( event ) {
22           
23               //押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
24               let img = document.getElementById("videochange");
25               let key_code = event.keyCode;
26               if(list[key_code]){
27                   img.src = list[key_code]+".png";
28               } 
29               else{
30                   img.src = "画像５";
31               }
32           }
33
34
35      </script>
36    </body>
37</html>