你的代码不工作，因为它抛出这个错误-Uncaught ReferenceError: videojs is not defined。我包括了videojs包以及相关的css在更新fiddle。尝试下面的代码。

function light(Cvideo) {
  var player = videojs("videoP");
  var video1 = false;
  var video2 = false;
  var video;
  if (Cvideo == 1) {

    if ((video1 === false)) {
      player.controlBar.progressControl.hide();
      player.on("timeupdate", function() {
        var percentage = (player.currentTime() / player.duration()) * 100;
        document.getElementById("percentage").innerHTML =
          Math.round(percentage) + "%";
        if (percentage === 100) {
          video1 = true;
        }
      });
    } else if ((video1 === true)) {
      player.controlBar.progressControl.show();
    }

  } else if (Cvideo == 2) {
    document.getElementById("nameV").innerHTML = "2";
    video = "video/2.mp4";

    if ((video2 === false)) {
      player.controlBar.progressControl.hide();
      player.on("timeupdate", function() {
        var percentage = (player.currentTime() / player.duration()) * 100;
        document.getElementById("percentage").innerHTML =
          Math.round(percentage) + "%";
        if (percentage === 100) {
          video2 = true;
        }
      });
    } else if ((video2 === true)) {
      player.controlBar.progressControl.show();
    }

  }
  player.src({
    type: "video/mp4",
    src: video
  });
  player.play();
}

<link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script>
<video id="videoP" class=" video-js vjs-fluid" controls data-setup='{}'>
  <source src="https://videos.pond5.com/iceland-drone-waterfall-rainbow-footage-071816011_main_xxl.mp4" type="video/mp4">
</video>
 <p id="percentage">0</p>
 <a href="#" class="nav-link text-dark ms-3" id="videoLink1"onclick="light(1)">1</a>
 <a href="#" class="nav-link text-dark ms-3" id="videoLink2"onclick="light(2)">2</a>

这确实抛出了一个错误-No compatible source was found for this media。但是代码可以工作。这个错误可能是由于videojs中缺少一些配置。我还没有调试这个，但是这个应该可以解决你的问题

我已经解决了我的问题。这是我需要的代码

var videos = [
  { id: 1, name: "1", src: "video/1.mp4", watched: false },
  { id: 2, name: "2", src: "video/2.mp4", watched: false },
  { id: 3, name: "3", src: "video/3.mp4", watched: false },
  { id: 4, name: "4", src: "video/4.mp4", watched: false },
  { id: 5, name: "5", src: "video/5.mp4", watched: false },
  { id: 6, name: "6", src: "video/6.mp4", watched: false },
  { id: 7, name: "7", src: "video/7.mp4", watched: false },
  { id: 8, name: "8", src: "video/8.mp4", watched: false },
  { id: 9, name: "9", src: "video/9.mp4", watched: false },
  { id: 10, name: "10", src: "video/10.mp4", watched: false }
 
];

function light(Cvideo) {
  let player = videojs("videoP");

  for (let i = 0; i < videos.length; i++) {
    if (videos[i].id === Cvideo) {
      document.getElementById("nameV").innerHTML = videos[i].name;
      player.src({ type: "video/mp4", src: videos[i].src });
      player.play();

      if (!videos[i].watched) {
        player.controlBar.progressControl.hide();
       
        player.on("timeupdate", function () {
          var percentage = (player.currentTime() / player.duration()) * 100;
          document.getElementById("percentage").innerHTML =
            Math.round(percentage) + "%";
          if (percentage === 100) {
            videos[i].watched = true;
            
            return;
          }
        });
      } else {
        player.controlBar.progressControl.show();
      }
      break;
    }
  }
}