移动端Safari与Chrome中ontimeupdate事件不触发，桌面端运行正常

问题根因 #

1. 移动端浏览器页内视频播放限制：iOS Safari 要求非全屏播放的视频必须添加 playsinline 属性，否则会强制拉起全屏播放器，原页面的视频元素不会触发任何播放相关事件；安卓部分版本Chrome也有类似限制。
2. 时间比较逻辑类型异常：data-video-timecode-show 和 data-video-timecode-hide 属性取出的值为字符串格式，直接和数字类型的 currentTime 对比时，移动端JS引擎的隐式转换规则和桌面端存在差异，会导致判断逻辑失效。
3. 事件绑定兼容性问题：直接给 ontimeupdate 赋值的绑定方式在部分移动端浏览器中优先级更低，容易出现绑定失效的情况。
4. 视频资源标签语法错误：原有代码中webm格式的source标签存在属性书写错误，ogv格式的type属性值错误，会导致移动端无法正常加载视频资源，自然不会触发timeupdate事件。

修复方案 #

1. 修正video标签属性与资源配置：

<video poster="https://assets.codepen.io/32795/poster.png" preload="metadata" id="medicalVideo" autoplay loop muted playsinline class="background-video desktop">
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
    <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
    <source src="/assets/video/http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>

2. 调整JS事件绑定与逻辑：

const medicalTextOverlay = document.getElementById('medicalTextOverlay');
const medicalVideoPlayer = document.getElementById('medicalVideo');
const medicalVideoCounter = document.getElementById("medicalVideoCounter");
let medicalVideoText = document.querySelectorAll('.medical-text-item');
let medicalVideoTotalTimePlayed = 0;
let medicalVideoLastUpdatedTime = 0;

// 改用addEventListener绑定事件，兼容性更强
medicalVideoPlayer.addEventListener('timeupdate', (event) => {
    const newTime = medicalVideoPlayer.currentTime;
    const timeDiff = newTime - medicalVideoLastUpdatedTime;
    if (timeDiff > 0) {
        medicalVideoTotalTimePlayed += timeDiff;
        for (let index = 0, length = medicalVideoText.length; index < length; index++) {
            const textItem = medicalVideoText[index];
            if (textItem.classList.contains('animate__fadeOut')) {
                textItem.classList.remove('animate__fadeOut');
            }
            // 显式转换为数字后再比较，避免隐式转换异常
            const itemShow = parseFloat(textItem.getAttribute('data-video-timecode-show'));
            const itemHide = parseFloat(textItem.getAttribute('data-video-timecode-hide'));
            if (newTime >= itemShow) {
                textItem.classList.add('show', 'animate__fadeIn');
            }
            if (newTime >= itemHide) {
                textItem.classList.remove('animate__fadeIn', 'show');
                textItem.classList.add('animate__fadeOut');
            }
        }
    }
    medicalVideoLastUpdatedTime = newTime;
});

// 兜底处理：解决部分浏览器自动播放被拦截的问题
document.addEventListener('DOMContentLoaded', () => {
    medicalVideoPlayer.play().catch(() => {
        // 若自动播放被拦截，可在此处添加用户交互引导，比如点击页面任意位置触发播放
        document.body.addEventListener('click', () => {
            medicalVideoPlayer.play();
        }, { once: true });
    });
});

以上修改完成后，即可在iOS 15 Safari、Android 11 Chrome中正常触发timeupdate事件，实现文字同步叠加效果。

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