如何判断页面中哪个HTML视频已播放结束并实现后续交互？

我来帮你搞定这个需求！因为你的视频是在PHP循环里生成的，首先得确保每个视频和对应的输入框能一一对应上，不能都用同一个id，不然JS会搞混。下面分两步来实现：

1. 调整HTML结构（给元素添加唯一关联标识） #

循环里生成的元素不能用重复的id，我们给每组视频和输入框加上相同的唯一标识（比如数据库里的视频ID），用data-*属性来关联。修改后的代码如下：

<?php while ($row = /* 你的循环查询逻辑 */) : ?>
    <!-- 给输入框添加data属性，和对应视频绑定 -->
    <input 
        type='text' 
        name='profileUsername' 
        value='<?php echo $username; ?>' 
        hidden
        data-video-id="<?php echo $row['id']; ?>"
        class="video-username"
    >
    <!-- 视频标签改用class，同时添加相同的data-video-id，去掉重复id -->
    <video width="320" height="240" class='video-player' controls data-video-id="<?php echo $row['id']; ?>">
        <source src="videos/<?php echo $row['video'] ?>" type="video/mp4">
        Your browser does not support the video tag.
    </video>
<?php endwhile; ?>

这里的核心细节：

• 把视频的id='video'改成classvideo-player，避免循环生成重复id
• 给输入框和视频都加上data-video-id属性，值用视频的唯一ID，确保两者精准关联
• 给输入框加classvideo-username，方便JS快速定位

2. 编写JavaScript监听播放结束事件 #

接下来写JS代码，监听每个视频的ended事件（播放完毕时触发），然后找到对应的输入框，获取值并展示：

// 获取页面上所有的视频元素
const videoPlayers = document.querySelectorAll('.video-player');

videoPlayers.forEach(player => {
    // 给每个视频绑定播放结束事件
    player.addEventListener('ended', function() {
        // 获取当前视频的唯一标识
        const videoId = this.getAttribute('data-video-id');
        // 找到和这个视频绑定的输入框
        const usernameInput = document.querySelector(`.video-username[data-video-id="${videoId}"]`);
        // 取出输入框里的用户名
        const username = usernameInput.value;
        
        // 这里可以自定义展示方式，比如弹窗提示
        alert(`视频播放完毕！对应的用户名：${username}`);
        
        // 也可以在页面上直接展示，比如在视频下方添加文本
        const displayText = document.createElement('p');
        displayText.textContent = `播放完成，关联用户名：${username}`;
        // 把文本插入到当前视频的后面
        this.after(displayText);
    });
});

关键说明 #

• 用data-*属性关联元素是最稳妥的方式，就算DOM结构调整也不容易失效
• HTML5视频原生支持ended事件，不需要额外插件就能触发播放完成的逻辑
• 循环里的元素一定要避免重复id，用class或者动态标识来区分

这样修改后，每个视频播放完毕时，就能精准获取到对应输入框里的值并展示啦！

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