视频问题-视频播放/暂停的脚本

Question

      <header id="header-container" role="banner">
      <div class="top-image test-top"></div>
      <div id="header-video-container" class="zoom">
        <img id="header-fallback" src="yourimage.jpg" alt="" />
        <video id="header-video" controls autoplay loop muted pauseinline width="1280" height="720" role="img">
                <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
            </video>
      </div>
      <a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fas fa-pause"></i></a>
    </header>

var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls");
playPauseBtn.onclick = function() {
  if (player.paused) {
    player.play();
    this.innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    player.pause();
    this.innerHTML = '<i class="fas fa-play"></i>';
  }
};

默认情况下，我需要将此视频“暂停”，并且当我们单击按钮时，它应该可以播放。但现在相反。