视频播放到100%时如何显示进度条

Question

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" class=" video-js vjs-fluid" controls data-setup='{}'> <source src="video/1.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>

Answer 1

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" 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>

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

Answer 2

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