网页视频结束后显示跳转按钮失效问题及禁用视频快进需求求助

嘿，我来帮你搞定这两个问题！咱们一步步拆解：

一、修复视频结束后按钮不显示的问题 #

看了你的代码，发现问题出在元素选择和层级控制上：
你把按钮放在了class="image_background"的div里，这个div初始是display: none，但你的JS代码只修改了里面img标签的display属性——父容器还是隐藏的，所以按钮自然出不来！

修改步骤： #

1. 把获取按钮元素的代码，从获取img改成获取外层的div容器
2. 在视频播放结束的事件里，修改这个div的display属性为block

修改后的核心JS片段：

var video = document.getElementById('video_background');
// 改为获取外层的div容器
var nextButtonDiv = document.querySelector('.image_background');

video.addEventListener('ended', function() {
  // 显示整个按钮容器
  nextButtonDiv.style.display = 'block';
}, false);

二、实现禁用视频快进功能 #

要禁用快进，我们需要监听视频的timeupdate事件，记录每一次的播放时间，如果检测到用户拖动进度条快进了，就把视频拉回上一次的播放位置。

具体实现代码： #

在原来的JS代码里添加这段逻辑：

// 记录上一次的播放时间
let lastPlayedTime = 0;

// 视频加载完成时初始化播放时间
video.addEventListener('loadedmetadata', function() {
  lastPlayedTime = this.currentTime;
});

// 监听播放进度变化，阻止快进
video.addEventListener('timeupdate', function() {
  // 允许正常播放（时间自然增长），但禁止快进（时间突然跳变）
  // 0.5是容错值，避免视频加载波动导致误判，可按需调整
  if (this.currentTime - lastPlayedTime > 0.5) {
    // 如果快进了，跳回上一次的时间点
    this.currentTime = lastPlayedTime;
  } else {
    // 正常播放时更新记录的时间
    lastPlayedTime = this.currentTime;
  }
});

完整修改后的代码 #

<html>
<head>
<style> 
body { 
  background-color: #F4F0EC; 
} 
img { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
} 
div.heading { 
  width: 40%; 
  text-align: center; 
  margin-left: auto; 
  margin-right: auto; 
  font-family: Verdana; 
  font-size: 18px; 
} 
div.wrapper { 
  width: 40%; 
  height: auto; 
  margin-left: auto; 
  margin-right: auto; 
} 
div.image_background { 
  display: none; 
} 
div.copyright { 
  width: 99%; 
  margin-left: auto; 
  margin-right: auto; 
  font-family: Verdana; 
  font-size: 12px; 
  text-align: center; 
  color: #E21D38; 
  margin: 0; 
  position: absolute; 
  top: 95%; 
  -ms-transform: translateY(-2%); 
  transform: translateY(-2%); 
} 
</style> 
</head> 
<body>
<br><br> 
<img style="width: 50%;" src="Banner.png" alt="Banner"><br><br><br> 
<div class="heading">Introduction</div><br><br> 
<div class="wrapper">
<video width="100%" controls preload="metadata" controlsList="nodownload" id="video_background"> 
  <source src="/test-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video><br>
</div><br><br> 
<div class="image_background">
<img id="image_background" src="/next-button.png" alt="Next Button">
</div><br><br><br><br> 
<div class="copyright">&#169; 2021 Takachsin Lodge. All Rights Reserved.</div> 

<script type="text/javascript"> 
var video = document.getElementById('video_background');
var nextButtonDiv = document.querySelector('.image_background');

// 视频结束显示按钮
video.addEventListener('ended', function() {
  nextButtonDiv.style.display = 'block';
}, false);

// 禁用快进功能
let lastPlayedTime = 0;

video.addEventListener('loadedmetadata', function() {
  lastPlayedTime = this.currentTime;
});

video.addEventListener('timeupdate', function() {
  if (this.currentTime - lastPlayedTime > 0.5) {
    this.currentTime = lastPlayedTime;
  } else {
    lastPlayedTime = this.currentTime;
  }
});
</script> 
</body> 
</html>

另外，我还帮你补全了CSS里颜色值的#符号（比如#F4F0EC），不然部分浏览器可能解析出错哦！

内容的提问来源于stack exchange，提问作者lsbowman98