移动 Safari 和 Chrome - ontimeupdate 不起作用，在桌面上工作

Question

我已经构建了一个解决方案，可以将文本覆盖到与视频同步的视频背景上，这在桌面浏览器中非常有效，但是在我的移动浏览器测试（iOS 15 (Safari) 和 Android 11 (Chrome) 中）似乎没有开火。

我检查了 MDN 文档和 caniuse.com，都说支持 ontimeupdate，查看堆栈上的问题后，我找不到适合我需要做的解决方案，任何帮助将不胜感激.

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;
medicalVideoPlayer.ontimeupdate = (event) => {
    var newTime = medicalVideoPlayer.currentTime;
    var timeDiff = newTime - medicalVideoLastUpdatedTime;
    if (timeDiff > 0) {
        medicalVideoTotalTimePlayed += timeDiff;
        var index = 0, length = medicalVideoText.length;
        for ( ; index < length; index++) {

            if (medicalVideoText[index].classList.contains('animate__fadeOut')) {
                medicalVideoText[index].classList.remove('animate__fadeOut');
            }

            let itemShow = medicalVideoText[index].getAttribute('data-video-timecode-show');
            let itemHide = medicalVideoText[index].getAttribute('data-video-timecode-hide');
            if (newTime >= itemShow) {
                medicalVideoText[index].classList.add('show');
                medicalVideoText[index].classList.add('animate__fadeIn');
            }

            if (newTime >= itemHide) {
                medicalVideoText[index].classList.remove('animate__fadeIn');
                medicalVideoText[index].classList.add('animate__fadeOut');
                medicalVideoText[index].classList.remove('show');
            }
        }
    }
    medicalVideoLastUpdatedTime = newTime;
};

body {
    margin: 0;
    padding: 0;
    background: #000;
}
.lhg-main #medicalTextOverlay {
    position: absolute;
    z-index: 10;
    width: 60vw;
    height: 60vh;
    display: block;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-family: "acumin-pro-wide";
    font-weight: 600;
    font-style: normal;
    font-size: 2.5rem;
    color: #fff;
    letter-spacing: 0.8;
    background: transparent
}

.lhg-main #medicalTextOverlay .medical-text-item {
    width: 100%;
    height: auto;
    position: absolute;
    opacity: 0 !important;
    font-weight: 300;
    font-size: 3rem;
    font-stretch: extra-condensed;
    letter-spacing: -0.0625rem;
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out
}

.lhg-main #medicalTextOverlay .medical-text-item.show {
    opacity: 1 !important
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(1) {
    top: 2rem;
    left: 0rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(2) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(3) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(4) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(5) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(6) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(7) {
    font-weight: 600;
    font-size: 6rem;
    letter-spacing: -0.125rem;
    top: 7rem;
    left: -1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(8) {
    font-weight: 600;
    font-size: 6rem;
    letter-spacing: -0.125rem;
    top: 7rem;
    left: -1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(9) {
    font-weight: 600;
    font-size: 6rem;
    letter-spacing: -0.125rem;
    top: 7rem;
    left: -1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(10) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(11) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(12) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(13) {
    top: 2rem;
    left: 1rem
}

.lhg-main #medicalTextOverlay .medical-text-item:nth-child(14) {
    top: 2rem;
    left: 1rem
}

<main class="lhg-main" id="medicalOverlay">
  <div id="medicalTextOverlay">
    <div class="medical-text-item animate__animated animate__slow" data-video-step="1" data-video-timecode-show="02.01" data-video-timecode-hide="04.02">To create something meaningful</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="2" data-video-timecode-show="04.03" data-video-timecode-hide="07.15">memorable and affect change</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="3" data-video-timecode-show="07.16" data-video-timecode-hide="11.19">you must elicit a reaction.<br/>Evoke an involuntary response.</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="5" data-video-timecode-show="11.20" data-video-timecode-hide="15.07">Ignite a spark.</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="6" data-video-timecode-show="15.08" data-video-timecode-hide="19.13">Through exceptional science, artfully delivered,</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="7" data-video-timecode-show="19.14" data-video-timecode-hide="22.18">our expert team knows how to elicit<br/>a real human reaction</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="8" data-video-timecode-show="22.19" data-video-timecode-hide="24.22">intellectual</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="9" data-video-timecode-show="24.23" data-video-timecode-hide="27.04">emotional</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="10" data-video-timecode-show="27.05" data-video-timecode-hide="30.06">visual.</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="11" data-video-timecode-show="30.07" data-video-timecode-hide="34.28">Our partners come back to us again and again</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="12" data-video-timecode-show="34.29" data-video-timecode-hide="39.07">to harness the power of Spark theory</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="13" data-video-timecode-show="39.08" data-video-timecode-hide="44.00">Let us help you elicit a reaction,<br>evoke a response</div>
    <div class="medical-text-item animate__animated animate__slow" data-video-step="14" data-video-timecode-show="44.01" data-video-timecode-hide="48.19">and spark change.</div>
  </div>
  <video poster="https://assets.codepen.io/32795/poster.png" preload="metadata" id="medicalVideo" autoplay="1" loop="1" muted 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/web"for_desktop">
                        <source src="/assets/video/http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogv">
                    </video>
</main>

Answer 1

这原来是一个重复 ID 问题，其中 <video> 标记在后面的代码中被重复了。