按钮调用JavaScript视频控制函数无响应问题排查求助

我帮你排查出了几个导致按钮无响应的关键问题，咱们逐个解决：

核心问题点 #

• 视频元素未设置ID：你用document.getElementById("YellowEyePenguinVid")尝试获取视频元素，但你的<video>标签没有添加对应的id="YellowEyePenguinVid"属性，导致无法找到目标元素，所有操作都没有作用对象。
• 变量名大小写不一致：你声明的变量是Video，但在播放/暂停函数里用的是vid（小写），JavaScript是大小写敏感的语言，这会导致函数找不到对应的视频变量。
• JS注释格式错误：在NorScreen()函数里你使用了HTML的注释语法<!-- ... -->，JavaScript不识别这种注释，会引发脚本解析错误，导致后续代码无法执行。

修复后的完整代码 #

<button onclick="PlayVid()">Play</button>
<button onclick="PauseVid()">Pause</button>
<button onclick="MaxScreen()">Full Screen</button>
<button onclick="NorScreen()">Normal Size</button>
<div class="video">
  <!-- 给video标签添加id属性 -->
  <video id="YellowEyePenguinVid">
    <source src="YellowEyePenguinVid.mp4" type="video/mp4">
  </video>
</div>
<script>
// 正确获取视频元素，保持变量名统一
const Video = document.getElementById("YellowEyePenguinVid");

function PlayVid() {
  Video.play(); // 使用统一的变量名Video
}

function PauseVid() {
  Video.pause(); // 使用统一的变量名Video
}

function MaxScreen() {
  Video.width = 560;
}

function NorScreen() {
  Video.width = 260;
  // 用JS的单行注释替代HTML注释
}
</script>

额外优化建议 #

如果你的全屏需求是浏览器原生的全屏模式（不是单纯放大宽度），可以修改MaxScreen()函数为：

function MaxScreen() {
  if (Video.requestFullscreen) {
    Video.requestFullscreen();
  } else if (Video.webkitRequestFullscreen) { // 兼容webkit内核浏览器
    Video.webkitRequestFullscreen();
  } else if (Video.mozRequestFullScreen) { // 兼容Firefox
    Video.mozRequestFullScreen();
  }
}

对应的退出全屏函数可以补充：

function ExitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
}

内容的提问来源于stack exchange，提问作者William. Foster