隐藏下一步按钮直到 HTML 视频未播放完毕

Question

I recently launched an online tutor.

I need a function when someone done with watching video lesson next button should populate until that it should remain hidden. Any help much appriciated Here's the code I am trying:

const video = document.querySelector('video'); video.addEventListener('ended', (event) => {   const div = document.getElementsByClassName("tutor-single-course-content-next");   div.style.visibility = "visible";
});

<div class="tutor-single-course-content-next"> <a class="tutor-btn tutor-btn-secondary tutor-btn-sm" href="yield4learning.co.uk/courses/bank-guarantee/lesson/lesson-7"> <span class="tutor-mr-8">Next</span> <span class="tutor-icon-next" area-hidden="true"></span> </a> </div>

.tutor-single-course-content-next{ Visibility: hidden; }

I would like hide the Next button until video is not completed.

Answer 1

can you use jQuery? if so, you can intercept the "ended" event and show up the next button like this width the jQuery show() function:

 $("#video-id").on("ended", function (e) { $(".tutor-single-course-content-next").show(); }