如何确保JavaScript在嵌入的Wistia视频加载完成后再执行

核心原理是直接使用Wistia官方提供的异步就绪回调，避免依赖不稳定的DOM选择器和页面加载事件，同时直接监听播放器原生事件，覆盖所有播放/暂停触发场景。

核心问题原因 #

代码失效主要有两个根因：

1. jQuery(document).ready仅保证页面初始DOM加载完成，而Wistia播放器是异步动态渲染的，此时播放器DOM还未生成，自然无法绑定事件
2. 代码中硬编码的#wistia_grid_29_main等选择器是Wistia动态生成的，会随着播放器版本、嵌入配置变化而改变，兼容性极差

修复后的完整JavaScript代码 #

// 初始化Wistia回调队列，避免Wistia JS未加载时报错
window._wq = window._wq || [];
// 对应你的视频ID wd2eroj8k3 的就绪回调，播放器加载完成后自动执行
_wq.push({ id: "wd2eroj8k3", onReady: function(video) {
    console.log('Wistia视频播放器已加载完成');
    var Interval;
    var minutes = 0; 
    var seconds = 0; 
    var tens = 0; 
    var appendTens = document.getElementById('tens');
    var appendSeconds = document.getElementById('seconds');
    var appendMinutes = document.getElementById('minutes');
    // 定义视频播放到解锁隐藏内容需要的时长
    var minutesUntilFinished = 16; // 可修改
    var secondsUntilFinished = 50; // 可修改
    // 定义倒计时计时器相关变量
    var appendSecondsCD = document.getElementById('secondsleft');
    var appendMinutesCD = document.getElementById('minutesleft');

    // 判断数字奇偶（用于控制计时器启停）
    function isOdd(num) { 
        return num % 2;
    }

    // 监听播放器播放事件，每次播放启动计时器
    video.bind("play", function() {
        console.log('视频开始播放');
        clearInterval(Interval);
        Interval = setInterval(startTimer, 10);
    });

    // 监听播放器暂停事件，每次暂停停止计时器
    video.bind("pause", function() {
        console.log('视频已暂停');
        clearInterval(Interval);
    });

    function startTimer () {
        tens++;
        // 小于9的数字前面补0
        if(tens <= 9) {
            appendTens.innerHTML = "0" + tens;
        }
        if (tens > 9) {
            appendTens.innerHTML = tens;
        } 
        if (tens > 99) {
            seconds++;
            
            // 剩余秒数减1
            secondsUntilFinished--;
                            
            if (secondsUntilFinished > 9) {
                document.getElementById("secondsleft").innerHTML = secondsUntilFinished;
            }
            if (secondsUntilFinished < 10) {
                document.getElementById("secondsleft").innerHTML = "0" + secondsUntilFinished;
            }
            
            // 剩余秒数为0时重置为59
            if (secondsUntilFinished < 1) {
                secondsUntilFinished = 60;
            }
            if (secondsUntilFinished == 59) {
                // 剩余分钟数减1
                minutesUntilFinished--;

                document.getElementById("minutesleft").innerHTML = minutesUntilFinished;

            }
            
            appendSeconds.innerHTML = "0" + seconds;
            tens = 0;
            appendTens.innerHTML = "0" + 0;
        }
        if (minutesUntilFinished <= 0) {
            minutesUntilFinished = 0;
        }
        if (seconds > 9) {
            appendSeconds.innerHTML = seconds;
        }
        if (seconds > 59) {
            minutes++;
            
            appendMinutes.innerHTML = "0" + minutes;
            seconds = 0;
            appendSeconds.innerHTML = "0" + 0;
            appendTens.innerHTML = "0" + 0;
        }
        // 播放满1分钟后显示倒计时器
        if (minutes > 0) {
            
            var countdowncheck = document.getElementById('countdowntimer');

            if(countdowncheck) {
                document.getElementById('countdowntimer').style.display = 'block';
            }
        }
        // 达到指定时长后显示隐藏内容
        if (minutes > 1) {
            
            // 播放满2分钟显示隐藏内容
            var hiddencontentcheck = document.getElementById('hiddencontentunlockedbytimer');
            if(hiddencontentcheck) {
                document.getElementById('hiddencontentunlockedbytimer').style.display = 'block';
            }
        }
    }
}});

改动说明 #

• 完全移除了原代码中所有Wistia DOM元素的查找、点击事件绑定逻辑，改为使用Wistia官方播放器API的事件监听，覆盖所有播放/暂停触发场景（包括键盘控制、耳机线控、全屏按钮控制等）
• 不需要再依赖任何页面加载事件，Wistia会在对应ID的播放器加载完成后自动执行回调内的逻辑，100%不会出现找不到元素的问题
• 不再依赖动态生成的DOM选择器，兼容性不受Wistia播放器版本更新影响

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