var video = $(".video")[0]; // get the video element
var toggleBtn = $(".videoBtn"); // get the toggle button element
var isPlaying = false; // initialize the playing state to false
var timeline = $(".timeline");
$( ".toggleCheckBox" ).change(function() {
if($(this).is(':checked')){
$(this).parent().parent().find(".label").text("Active");
}else{
$(this).parent().parent().find(".label").text("Unactive");
}
});
toggleBtn.click(function() {
if (isPlaying) {
video.pause(); // pause the video
$(".playIcon").addClass("show");
toggleBtn.html(` 播放`);
// update the button text
isPlaying = false; // set the playing state to false
} else {
video.play(); // play the video
toggleBtn.html(` 暫停`);
isPlaying = true; // set the playing state to true
}
});
$(video).on("timeupdate", function() {
var percentage = (video.currentTime / video.duration) * 100;
timeline.width(percentage + "%");
});
$(".videoWrap").click(function() {
if (isPlaying) {
video.pause(); // pause the video
$(".playIcon").addClass("show");
toggleBtn.html(` 播放`);
// update the button text
isPlaying = false; // set the playing state to false
} else {
video.play(); // play the video
toggleBtn.html(` 暫停`);
isPlaying = true; // set the playing state to true
}
});
$('.replayBtn').click(function() {
isPlaying = true;
toggleBtn.html(` 暫停`);
video.currentTime = 0;
video.play();
});