使用键盘在全屏模式下交换 2 个视频

Question

我有一组使用键盘控制的视频。 “F”切换全屏模式，左右切换 html 包装器内的视频。

除了在全屏模式下交换视频外，我的一切都可以满足我的需要。出于某种原因，我似乎无法全神贯注于如何实现这一目标。

任何帮助将不胜感激。

我在这里包含了代码，还有一个指向我创建的用于查看全屏操作的笔的链接...https://codepen.io/Simetria/pen/wvYqaXr

let fSc = false;
   window.addEventListener('keyup', (e) => {
      let vidWrap = document.querySelector(".interactiveVidWrapper");
      let vid1 = vidWrap.querySelector(".interactiveVidWrapper video.active");

      if(e.which == 70) { // F clicked
         fSc ? document.exitFullscreen() : vid1.requestFullscreen();
         fSc = !fSc;
      } else if (e.which == 39) { // RIGHT Arrow clicked
         swapVideos("forwards");
      } else if (e.which == 37) { // LEFT Arrow clicked
         swapVideos("backwards");
      }
   });
   function swapVideos(dir){
      const vids = document.querySelectorAll(".interactiveVidWrapper video");
      let vidInd = 0;
      vids.forEach((ele, ind) => {
         if(ele.classList.contains("active")){
            if(dir == "forwards"){
               if( ind+1 == vids.length ){
                  return false;
               } else {
                  vidInd = ind+1;
               }
               console.log(fSc);
            } else if (dir == "backwards"){
               if( ind-1 < 0 ){
                  return false;
               } else {
                  vidInd = ind-1;
               }
            }
            setTimeout(() => {
               ele.classList.remove("active");
            }, 50);
         }
      });
      vids[vidInd].classList.add("active");
   }

      .interactiveVidWrapper {
         position: relative;
         width: 800px;
         height: 463px;
         overflow: hidden;
      }
      .interactiveVidWrapper video {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 0;
         transition: all 100ms ease-in-out;
         pointer-events:none;
      }
      .interactiveVidWrapper video.active {
         opacity: 1;
         pointer-events:all;
      }

<div class="interactiveVidWrapper">
   <video class="active" data-vidInd="0" controls>
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
   </video>
   <video data-vidInd="1" controls>
      <source src="https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" type="video/mp4" />
   </video>
   <video data-vidInd="1" controls>
      <source src="https://ia800209.us.archive.org/20/items/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4" />
   </video>
</div>

谢谢！

-S