英文:
Interactive buttons in video player
问题
我正在尝试创建一个简单的index.php，在其中我想显示一个视频，但当视频达到20秒时，询问用户"你在听吗"或类似的内容。在阅读了很多教程之后，我成功在第20秒显示了按钮，但当我点击按钮时，视频不会在接下来的20秒内恢复，只有几毫秒而已。完整的想法是每20秒询问一次"你在听吗"。以下是我的代码：
<body>
<div class="video-container">
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button class="interactive-button" data-time="20">你在听吗？</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const video = document.getElementById("myVideo");
const buttons = document.querySelectorAll(".interactive-button");
buttons.forEach((button) => {
const time = parseInt(button.dataset.time);
button.addEventListener("click", function () {
if (video.currentTime >= time) {
video.currentTime = time;
video.play();
}
});
});
video.addEventListener("timeupdate", function () {
const currentTime = video.currentTime;
buttons.forEach((button) => {
const time = parseInt(button.dataset.time);
if (currentTime >= time) {
button.style.display = "block";
video.pause();
} else {
button.style.display = "none";
}
});
});
});
</script>
</body>
这是你提供的代码的翻译部分。
英文:
I am trying to make a simple index.php where I want to display a video but when the video reaches 20 seconds ask the user "Are you listening" or something like this.
After reading so many tutorials I achieved displaying the button on the 20th second but when I click on the button the video is not resuming for the next 20 seconds but for a few milliseconds.
The complete idea is to ask every 20 seconds "Are you listening"
Here is my code now:
<body>
<div class="video-container">
<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button class="interactive-button" data-time="20">Are you listening carefully?</button>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const video = document.getElementById("myVideo");
const buttons = document.querySelectorAll(".interactive-button");
buttons.forEach((button) => {
const time = parseInt(button.dataset.time);
button.addEventListener("click", function () {
if (video.currentTime >= time) {
video.currentTime = time;
video.play();
}
});
});
video.addEventListener("timeupdate", function () {
const currentTime = video.currentTime;
buttons.forEach((button) => {
const time = parseInt(button.dataset.time);
if (currentTime >= time) {
button.style.display = "block";
video.pause();
} else {
button.style.display = "none";
}
});
});
});
</script>
</body>
答案1
得分: 1
在 timeupdate 方法中，始终检查视频时间是否大于20秒。因此，当超过20秒时，视频不会重新开始播放，因为它已经超过了20秒标记。
每次都应该更新 button.dataset.time 的值。
buttons.forEach((button) => {
button.addEventListener("click", function () {
const time = parseInt(button.dataset.time);
if (video.currentTime >= time) {
video.currentTime = time;
button.dataset.time = time + 20;
video.play();
}
});
});
英文:
In the timeupdate method, it is always checked whether the video time is greater than 20 seconds. Therefore, when it exceeds the 20-second mark, the video doesn't restart because it has already passed the 20-second mark.
You should update the button.dataset.time value each time.
buttons.forEach((button) => {
button.addEventListener("click", function () {
const time = parseInt(button.dataset.time);
if (video.currentTime >= time) {
video.currentTime = time;
button.dataset.time = time + 20;
video.play();
}
});
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论