我已经建立了一个解决方案，将文本覆盖到视频背景上，这是定时的视频，这在桌面浏览器中工作得很好，但在我的移动浏览器测试(iOS 15 (Safari)和Android 11 (Chrome) javascript似乎没有火。
我已经检查了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>这是一个重复的ID问题，其中<video>标记在后面的代码中被重复了。