how to show the progress bar when video play 100%-CodePudding

i'm try Set video1=false, and when percentage=100, change video1=true, and use an if-else condition to check video1's value to hide or show the progress bar. But when percentage = 100 why doesn't return video1=true . **I want to keep a separate variable in each video.

function light(Cvideo) {
  var player = videojs("videoP");
  var video1 = false;
  var video2 = false;
  var video;
  if (Cvideo == 1) {
    document.getElementById("nameV").innerHTML =
      "1";
    video = "video/1.mp4";

    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();
 }

<video id="videoP"  controls data-setup='{}'>
  <source src="video/1.mp4" type="video/mp4">
</video>
 <p id="percentage">0</p>
 <a href="#"  id="videoLink1"onclick="light(1)">1</a>
 <a href="#"  id="videoLink2"onclick="light(2)">2</a>

CodePudding user response：

Your code doesn't work because it throws this error - Uncaught ReferenceError: videojs is not defined. I included the videojs package as well as the related css in the updated fiddle. Try the below code.

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"  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="#"  id="videoLink1"onclick="light(1)">1</a>
 <a href="#"  id="videoLink2"onclick="light(2)">2</a>

This does throw an error - No compatible source was found for this media. But the code works. This error might be due to some missing config in videojs. I haven't debugged this yet but this should fix your problem

CodePudding user response：

I have solved my problem. and this is the code i need

    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;
    }
  }
}