点击视频播放按钮报playPause未定义错误视频无法播放问题咨询

数据老陈

2026-9-30

错误诱因

作用域问题：playPause 函数定义在 jQuery(document.ready) 的回调函数内部，属于局部作用域函数，仅能在该回调内部访问。而HTML行内 onclick="playPause()" 绑定的事件会默认在全局 window 作用域下查找对应函数，找不到就抛出未定义错误。
重复绑定问题：你已经在JS代码中通过 addEventListener 给按钮绑定了点击事件，HTML行内的 onclick 属于多余的重复绑定，反而触发了作用域报错。
额外隐藏问题：JS代码中 myVideo 变量未声明直接赋值，会隐式转为全局变量，存在变量污染风险；且原有逻辑直接修改按钮 innerHTML 会覆盖按钮内部的播放图标元素，不符合原始UI设计。

修复方案

步骤1：修改HTML代码

删除按钮标签上的行内 onclick 属性，修改后对应代码如下：

<button id="vidbutton">
  <img alt="play button" src="/assets/img/play__button.svg">
</button>

步骤2：修改JS代码

调整变量声明，同时根据需求选择按钮状态切换的实现方式：

实现1：保留图标切换（推荐，匹配原有UI）

提前准备好暂停状态的svg图标，替换代码中对应路径即可：

jQuery(document).ready(function($){
    var ppbutton = document.getElementById("vidbutton");
    var myVideo = document.getElementById("video1"); // 补全变量声明避免全局污染
    var btnImg = ppbutton.querySelector('img');
    
    ppbutton.addEventListener("click", playPause);
    
    function playPause() {
        if (myVideo.paused) {
            myVideo.play();
            btnImg.src = "/assets/img/pause__button.svg"; // 替换为实际暂停图标路径
            btnImg.alt = "pause button";
        } else  {
            myVideo.pause();
            btnImg.src = "/assets/img/play__button.svg";
            btnImg.alt = "play button";
        }
    }
});