如何确保加载嵌入式 Wistia 视频后始终加载我的 Javascript？
我有一个嵌入了 Wistia 视频的页面，以及一些试图执行以下操作的 Javascript：
- 检测视频的播放按钮（和全屏按钮）
- 监听单击播放按钮的时间（或再次单击，也就是暂停）
- 单击播放按钮时启动计时器
- 视频暂停时暂停计时器
- 足够的时间过去后，揭示一些隐藏的内容
我在测试期间有这个工作，但后来我意识到它在大多数情况下都失败了，因为我的 Javascript 在加载 Wistia 视频之前运行，因此，它没有找到我需要添加事件监听器的视频元素。
我试图查找延迟 javascript 或等待整个页面加载的解决方案，但它不起作用。您可以提供任何帮助以使此计时器 100% 工作，我们将不胜感激！
请在下面查看我的代码，或在此处查看 JSFiddle：https ://jsfiddle.net/skuq16t3/
HTML
<div id="video">
<script src="https://fast.wistia.com/embed/medias/wd2eroj8k3.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_responsive_padding" style="padding: 56.25% 0 0 0; position: relative;">
<div class="wistia_responsive_wrapper" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;">
<div class="wistia_embed wistia_async_wd2eroj8k3 videoFoam=true" style="height: 100%; position: relative; width: 100%;">
<div class="wistia_swatch" style="height: 100%; left: 0; opacity: 0; overflow: hidden; position: absolute; top: 0; transition: opacity 200ms; width: 100%;">
<img style="filter: blur(5px); height: 100%; object-fit: contain; width: 100%;" src="https://fast.wistia.com/embed/medias/wd2eroj8k3/swatch" alt="" aria-hidden="true" />
</div>
</div>
</div>
</div>
</div>
<div id="countdowntimer">
<p class="left normaltext countdowntext">Your exclusive invitation will be unlocked in <span class="countdowntimerspan"><span id="minutesleft">16</span>:<span id="secondsleft">50</span></span></p>
<p class="stopwatchscreen"><span id="minutes">00</span>:<span id="seconds">00</span>:<span id="tens">00</span></p>
</div>
<div id="hiddencontentunlockedbytimer">
<p>Hidden content here</p>
</div>
CSS
#video {
max-width: 400px;
}
#countdowntimer {
background: #fafafa;
padding: 20px;
text-align: center;
border: 3px solid #b81937;
border-radius: 5px;
margin: 40px 20px;
font-size: 24px;
box-shadow: 5px 5px 10px #aaa;
}
#hiddencontentunlockedbytimer {
display: none;
}
Javascript
jQuery(document).ready(function() {
console.log('The page is now loaded');
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');
// make variables for how much time needs to pass before the video is finished
var minutesUntilFinished = 16; // change this
var secondsUntilFinished = 50; // change this
// make variables for the countdown timer
var appendSecondsCD = document.getElementById('secondsleft');
var appendMinutesCD = document.getElementById('minutesleft');
// This is the full screen button. Do nothing when this is clicked
var wistiaFullScreenButton = document.querySelector('#wistia_grid_29_main button.w-vulcan-v2-button.w-css-reset.w-css-reset-tree.w-css-reset-button-important');
// find the things that will start and pause the Wistia video
var wistiaBigPlayButton = document.querySelector('#wistia_grid_29_main button.w-big-play-button.w-css-reset-button-important.w-vulcan-v2-button');
var wistiaVideoArea = document.querySelector('#wistia_grid_29_main .w-vulcan--background.w-css-reset');
// test if different parts of the Wistia video were found and then clicked
if(wistiaFullScreenButton) {
console.log('The full screen button was found');
document.querySelector('#wistia_grid_29_main button.w-vulcan-v2-button.w-css-reset.w-css-reset-tree.w-css-reset-button-important').addEventListener('click', function() {
console.log('The Wistia full screen button was clicked');
});
} else {
console.log('The full screen button was NOT found');
}
if(wistiaBigPlayButton) {
console.log('The big Wistia play button was found');
document.querySelector('#wistia_grid_29_main button.w-big-play-button.w-css-reset-button-important.w-vulcan-v2-button').addEventListener('click', function() {
console.log('The big Wistia play button was clicked');
});
} else {
console.log('The big Wistia play button was NOT found');
}
if(wistiaVideoArea) {
console.log('The Wistia video area was found');
document.querySelector('#wistia_grid_29_main .w-vulcan--background.w-css-reset').addEventListener('click', function() {
console.log('The Wistia video area was clicked');
});
} else {
console.log('The Wistia video area was NOT found');
}
// figure out if a number is even or odd (for pausing the timer)
function isOdd(num) {
return num % 2;
}
// start the timer after the big button is pressed the first time
jQuery(wistiaBigPlayButton).one('click', function() {
console.log('The Big Wistia play button was clicked for the first time');
var BigPlayClickCount = 1;
// start the timer
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
// pause the timer if the video is paused
wistiaBigPlayButton.onclick = function() {
// increase the click count by 1
BigPlayClickCount++;
console.log(BigPlayClickCount);
// if its an even number, start the timer
if(isOdd(BigPlayClickCount) == 1) {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
// if its an odd number, pause the timer
if(isOdd(BigPlayClickCount) == 0) {
clearInterval(Interval);
}
}
// pause the timer if the video is paused
wistiaVideoArea.onclick = function() {
// increase the click count by 1
BigPlayClickCount++;
console.log(BigPlayClickCount);
// if its an even number, start the timer
if(isOdd(BigPlayClickCount) == 1) {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
// if its an odd number, pause the timer
if(isOdd(BigPlayClickCount) == 0) {
clearInterval(Interval);
}
}
});
// also start the timer if they click on the video but not the big red button (both work)
jQuery(wistiaVideoArea).one('click', function() {
console.log("The Wistia video area was clicked for the first time");
var BigPlayClickCount = 1;
console.log(BigPlayClickCount);
// start the timer
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
// pause the timer if the video is paused
wistiaBigPlayButton.onclick = function() {
// increase the click count by 1
BigPlayClickCount++;
console.log(BigPlayClickCount);
// if its an even number, start the timer
if(isOdd(BigPlayClickCount) == 1) {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
// if its an odd number, pause the timer
if(isOdd(BigPlayClickCount) == 0) {
clearInterval(Interval);
}
}
// pause the timer if the video is paused
wistiaVideoArea.onclick = function() {
// increase the click count by 1
BigPlayClickCount++;
// if its an even number, start the timer
if(isOdd(BigPlayClickCount) == 1) {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
// if its an odd number, pause the timer
if(isOdd(BigPlayClickCount) == 0) {
clearInterval(Interval);
}
}
});
function startTimer () {
tens++;
// add a 0 at the beginning if less than 9
if(tens <= 9) {
appendTens.innerHTML = "0" + tens;
}
if (tens > 9) {
appendTens.innerHTML = tens;
}
if (tens > 99) {
seconds++;
// subtract time from the seconds left
secondsUntilFinished--;
if (secondsUntilFinished > 9) {
document.getElementById("secondsleft").innerHTML = secondsUntilFinished;
}
if (secondsUntilFinished < 10) {
document.getElementById("secondsleft").innerHTML = "0" + secondsUntilFinished;
}
// once the seconds left reaches 0, start back over at 59
if (secondsUntilFinished < 1) {
secondsUntilFinished = 60;
}
if (secondsUntilFinished == 59) {
// subtract time from the minutes left counter
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;
}
// after 1 minute show the countdown timer
if (minutes > 0) {
var countdowncheck = document.getElementById('countdowntimer');
if(countdowncheck) {
document.getElementById('countdowntimer').style.display = 'block';
}
}
// after a certain amount of time passes, show the hidden content
if (minutes > 1) {
// after 2 minutes show the hidden content
var hiddencontentcheck = document.getElementById('hiddencontentunlockedbytimer');
if(hiddencontentcheck) {
document.getElementById('hiddencontentunlockedbytimer').style.display = 'block';
}
}
}
});