1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<!DOCTYPE html>
<html lang="en">
<head>
<?php include 'inc/headlinks.php'; ?>
</head>
<body class="bodyBg">
<section class="body">
<div class="titleWrap p-3 mb-1 boxshadow">
<p class="h1 mb-0">課程A-問題1</p>
</div>
<div class="wrap boxshadow">
<div class="paperWrap">
<div class="videoWrap">
<video width="100%" class="video" height="100%" playsinline style="pointer-events: none;"
poster="../assets/images/video_poster.jpg">
<source src="../assets/video/ques-01.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="progress">
<span class="timeline"></span>
</div>
</div>
<div class="videoControl question">
<div>
<button class="videoBtn btn"><i class="fas fa-play-circle"></i> 播放</button>
<button class="replayBtn btn hide"><i class="fas fa-undo"></i> 重播</button>
</div>
<p class="small"><span class="text-danger">*</span>請先看完影片,再作答題目!</p>
</div>
<div class="questionContent">
<div class="questionWrap">
<p class="mb-4">下列那個不是正確使用梯具?</p>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="q1" value="1">
<label class="form-check-label" for="q1">
使用清潔梯具
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="q2" value="2">
<label class="form-check-label" for="q2">
使用乾爽梯具
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="question1" id="q3" value="3">
<label class="form-check-label" for="q3">
未乾酒漆梯具
</label>
</div>
</div>
<div class="btnControl question">
<div class="text-danger"><span class="errMessage"></span></div>
<button class="btn btn-primary btn-lg submitBtn">
下一題</button>
</div>
</div>
</div>
</div>
</section>
</body>
<script>
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");
$(function() {
$(video).on("timeupdate", function() {
var percentage = (video.currentTime / video.duration) * 100;
timeline.width(percentage + "%");
});
$(video).on('ended', function() {
isPlaying = false;
toggleBtn.html(`<i class="fas fa-play-circle"></i> 播放`);
console.log('The video has ended.');
$(".questionContent").fadeIn();
$(".replayBtn").removeClass("hide");
// Call a function or execute code here
});
});
$(video).on("timeupdate", function() {
var percentage = (video.currentTime / video.duration) * 100;
timeline.width(percentage + "%");
});
$(".submitBtn").click(function() {
var selectedValue = $('input[name=question1]:checked').val();
console.log(selectedValue);
if (selectedValue == undefined) {
$(".errMessage").show().text("**請作答題目");
} else if (selectedValue != 3) {
$(".errMessage").show().text("**答案錯誤! 請再次作答");
} else {
window.location.href = 'success.php';
}
});
toggleBtn.click(function() {
if (isPlaying) {
video.pause(); // pause the video
$(".playIcon").addClass("show");
toggleBtn.html(`<i class="fas fa-play-circle"></i> 播放`);
// update the button text
isPlaying = false; // set the playing state to false
} else {
video.play(); // play the video
toggleBtn.html(`<i class="fas fa-stop-circle"></i> 暫停`);
isPlaying = true; // set the playing state to true
}
});
$('.replayBtn').click(function() {
video.currentTime = 0;
video.play();
isPlaying = true;
toggleBtn.html(`<i class="fas fa-stop-circle"></i> 暫停`);
});
</script>
</html>
|