HTML/CSS/JS实现视频播放暂停按钮失效问题求助

看起来你遇到的核心问题有两个，咱们一步步来解决：

1. 缺少jQuery库的引入 #

你的JavaScript代码用了$（jQuery专属语法），但你的HTML里完全没引入jQuery库——浏览器根本不认识这些代码，所以点击事件完全没绑定上，自然没法触发视频的播放/暂停。

解决方法：在引入scripts.js之前，先添加jQuery的引入代码，推荐用CDN版本，把这段放到<head>里：

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

这样你的JS逻辑才能被浏览器正确解析执行。

2. 视频资源的跨域限制（潜在坑点） #

你用的视频链接来自第三方CDN，很多这类平台会有CORS（跨域资源共享）限制，可能导致浏览器拒绝加载视频。如果解决jQuery问题后视频还是无法播放，建议换成你本地的视频文件，或者找一个允许跨域访问的测试视频地址。

优化后的完整代码参考 #

index.html #

<!DOCTYPE html>
<html>
<head>
  <!-- 先引入jQuery，确保在自定义脚本之前 -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
  <div class="wrapper">
    <video class="video">
      <source src="你的本地视频路径或允许跨域的视频地址" type="video/mp4" />
    </video>
    <div class="playpause"></div>
  </div>
</body>
</html>

scripts.js（优化写法，更简洁易读） #

$('.wrapper').click(function() {
  const video = $(this).find('.video')[0];
  const playPauseBtn = $(this).find('.playpause');
  
  if (video.paused) {
    video.play();
    playPauseBtn.fadeOut();
  } else {
    video.pause();
    playPauseBtn.fadeIn();
  }
});

mystyle.css（你的原有代码没问题，直接保留） #

.video {
  width: 100%;
  border: 1px solid black;
}
.wrapper{
  display:table;
  width:auto;
  position:relative;
  width:50%;
}
.playpause {
  background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
  background-repeat:no-repeat;
  width:50%;
  height:50%;
  position:absolute;
  left:0%; right:0%;
  top:0%; bottom:0%;
  margin:auto;
  background-size:contain;
  background-position: center;
}

额外小提示 #

测试时可以打开浏览器开发者工具（按F12），切换到Console标签页——这里会显示所有报错信息，比如没引入jQuery时，会提示$ is not defined，这是排查前端问题的高效方法。

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