HTML5无控制条视频：点击视频或播放图标实现播放/暂停故障排查

我看你遇到的问题是点击视频正常，但点击播放图标没反应，这是因为你写的事件绑定语法出错啦！

问题根源 #

你原来的代码里：

$(document).on('click', 'video', '#btnplay', function (e) { ... })

jQuery的on()方法参数顺序是：事件类型, 选择器, 数据, 回调函数，你把#btnplay放在了第三个参数的位置，它被当成了事件传递的数据，而不是要绑定的元素选择器，所以图标根本没被绑定点击事件。

修正方案 #

1. 正确绑定多个元素的点击事件：把video和#btnplay放在同一个选择器字符串里，用逗号分隔，这样两个元素都会触发点击事件。
2. 处理事件冒泡：点击图标时，事件会向上冒泡到video元素，可能导致播放/暂停状态切换两次，所以要在图标点击时阻止冒泡。
3. 正确获取video元素：点击图标时，$(this)指向的是图标，不是video，所以需要明确获取到对应的video元素。

完整示例代码 #

HTML结构（假设你的结构是这样）：

<div class="video-container">
  <video id="myVideo" controls="false" src="your-video-url.mp4"></video>
  <img id="btnplay" src="play-icon.png" alt="播放/暂停">
</div>

修正后的JS代码：

$(document).on('click', 'video, #btnplay', function (e) {
    // 阻止图标点击事件冒泡到video，避免重复触发
    if ($(this).is('#btnplay')) {
        e.stopPropagation();
    }
    // 获取video元素，这里用id选择器更可靠
    var video = $('#myVideo').get(0);
    if (video.paused) {
        video.play();
        // 可以在这里切换图标，比如换成暂停图标
        $('#btnplay').attr('src', 'pause-icon.png');
    } else {
        video.pause();
        // 切换回播放图标
        $('#btnplay').attr('src', 'play-icon.png');
    }
});

额外提示 #

• 如果你不想用id选择器，也可以通过DOM关系获取video，比如如果图标是video的同级元素，可以用$(this).siblings('video').get(0)；如果图标在video的父容器里，用$(this).closest('.video-container').find('video').get(0)。
• 记得给video设置controls="false"或者去掉controls属性，确保原生控制条不显示。

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