视频覆盖层播放按钮：按钮文本切换及功能优化问题

嘿，我看了你遇到的这几个小麻烦，咱们一个个来搞定：

1. 先解决控制台报错“$ is not defined” #

这个报错是因为你用了jQuery的语法（比如$(document).ready、$('button')），但页面里没有引入jQuery库：

• 在自己的项目里，你需要在JavaScript代码之前添加这行代码来引入jQuery：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

• 在JSFiddle里，点击左侧面板的「Frameworks & Extensions」，在下拉菜单里选择任意版本的jQuery，就能解决这个报错。

2. 修复按钮文本切换和播放/暂停失效的问题 #

你的JavaScript代码里有两个小疏漏：

• 视频元素ID写错了：你用document.getElementById("video")，但你的视频ID是vid1，应该改成document.getElementById("vid1")；
• 按钮的点击事件绑定漏了$：('button').click(...)应该写成$('button').click(...)。

3. 实现播放时隐藏/半透明按钮的需求 #

这里给你两种灵活的实现方式：

方式一：利用现有类配合CSS #

因为点击播放后，按钮会移除_active类，直接在CSS里加规则，让非活跃状态的按钮变透明：

button:not(._active) {
  opacity: 0;
  transition: opacity 0.3s ease; /* 加上过渡动画更丝滑 */
}
button:not(._active):hover {
  opacity: 0.5; /* 播放时hover按钮可以显示出来 */
}

方式二：监听视频的play/pause事件 #

这种方式能直接响应视频自身的播放状态，同步控制按钮：

$('#vid1').on('play', function() {
  $('button').fadeTo(300, 0); // 播放时按钮渐隐
});
$('#vid1').on('pause', function() {
  $('button').fadeTo(300, 0.5); // 暂停时按钮恢复半透明
});

4. 解决JSFiddle里按钮不显示的问题 #

你的按钮是position: absolute，但父容器.image-slider-fade没有设置position: relative，导致按钮定位是相对于整个页面，而不是视频容器。给父容器加上相对定位，按钮就能正确居中在视频上方了：

.image-slider-fade.fade {
  position: relative;
}

修正后的完整代码 #

HTML

<div class="image-slider-fade fade">
  <button class="_active">Play</button>
  <video id="vid1" controls>
    <source src="videos/testvid1.mp4" type="video/mp4">
    Your browser does not support the video.
  </video>
</div>
<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

CSS

.image-slider-fade.fade {
  position: relative; /* 让按钮相对于这个容器定位 */
}

#vid1, #vid2, #vid3, #vid4 {
  width: 100%;
  z-index: -1;
}

button {
  background-color: #666;
  border: medium none;
  color: #fff;
  display: block;
  font-size: 18px;
  left: 0;
  margin: 0 auto;
  padding: 8px 16px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 让按钮完美垂直居中 */
  cursor: pointer;
  z-index: 1; /* 确保按钮在视频上方 */
}

button._active {
  opacity: 0.5;
}

button:hover {
  background-color: #e05a00;
}

/* 播放时按钮透明 */
button:not(._active) {
  opacity: 0;
  transition: opacity 0.3s ease;
}
button:not(._active):hover {
  opacity: 0.5;
}

JavaScript

$(document).ready(function() {
  var ctrlVideo = document.getElementById("vid1"); // 修正视频ID
  
  $('button').click(function() {
    if ($('button').hasClass("_active")) {
      ctrlVideo.play();
      $('button').html("Pause");
      $('button').toggleClass("_active");
    } else {
      ctrlVideo.pause();
      $('button').html("Play");
      $('button').toggleClass("_active");
    }
  });
  
  // 额外：监听视频自身的播放/暂停按钮，同步更新按钮状态
  $('#vid1').on('play', function() {
    $('button').html("Pause").removeClass("_active");
  });
  $('#vid1').on('pause', function() {
    $('button').html("Play").addClass("_active");
  });
});

这样所有问题都能解决啦：按钮能正常显示、点击切换Play/Pause文本、播放时按钮透明（hover可显示），也不会再出现jQuery未定义的报错。

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