切换标签页后播放/暂停按钮无法控制对应音视频问题咨询

问题原因 #

• 事件绑定逻辑错误：jQuery的on()方法仅会给页面加载时已存在的元素绑定事件。页面初始化时给#audio_play、#audio_pause绑定了音频控制事件，后续修改按钮ID为video_play时，原本绑定的音频事件不会消失，而页面初始化时#video_play元素不存在，你写的视频控制事件根本没有绑定到按钮上，因此切换标签后点击按钮还是控制旧的音频。
• 视频控制方法错误：iframe嵌入的Vimeo播放器无法直接调用普通video元素的play()/pause()方法控制播放，需要使用Vimeo官方提供的播放器API才能操作。
• 实现思路不合理：事件是绑定在DOM节点上而非ID上，动态修改元素ID无法切换绑定的事件逻辑。

解决方案 #

1. 引入Vimeo播放器API #

在HTML的脚本引入部分添加Vimeo播放器SDK：

<script src="https://player.vimeo.com/api/player.js"></script>

2. 修改按钮标记 #

给两个控制按钮添加通用类，不需要动态修改ID：

<div class="flex con">
    <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-blue-700 rounded shadow ripple hover:shadow-lg hover:bg-blue-800 focus:outline-none play-btn" id="audio_play">play</button>
    <button class="inline-block px-6 py-2 text-xs font-medium leading-6 text-center text-white uppercase transition bg-red-500 rounded shadow ripple hover:shadow-lg hover:bg-red-600 focus:outline-none pause-btn" id="audio_pause">Pause</button>
</div>

3. 重写JS控制逻辑 #

直接根据当前激活的标签判断要控制的媒体类型，删除原有的修改ID相关代码：

$(document).ready(function () {
    // 初始化Vimeo播放器实例
    const vimeoPlayer = new Vimeo.Player($('#video')[0]);
    // 获取当前激活的标签索引
    function getActiveTab() {
        return document.querySelector('[x-data="setup()"]').__x.$data.activeTab;
    }
    // 播放按钮通用事件
    $('.play-btn').on('click', function () {
        const activeTab = getActiveTab();
        if (activeTab === 0) {
            $('#audio').get(0).play();
            vimeoPlayer.pause();
        } else if (activeTab === 1) {
            vimeoPlayer.play();
            $('#audio').get(0).pause();
        }
    })
    // 暂停按钮通用事件
    $('.pause-btn').on('click', function () {
        const activeTab = getActiveTab();
        if (activeTab === 0) {
            $('#audio').get(0).pause();
        } else if (activeTab === 1) {
            vimeoPlayer.pause();
        }
    })
})

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