如何让Javascript在视频完全加载到DOM后运行

Question

我如何确保我的Javascript总是加载后嵌入的witia视频加载?

我有一个页面，有一个witia视频嵌入其中，和一些Javascript，正试图做以下事情:

1. 检测视频播放按钮(和全屏按钮)
2. 监听播放按钮被点击(或再次点击，又名暂停)
3. 当播放按钮被点击时开始计时
4. 视频暂停时暂停定时器
5. 经过足够的时间后，显示一些隐藏的内容

我在测试期间有这个工作，但后来我意识到它在大多数情况下都失败了，因为我的Javascript在加载Wistia视频之前运行，因此，它没有找到我需要添加eventlistener的视频元素。

我试图查找延迟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';
}
}
}
});

Answer 1

这里有很多代码。也许我可以把它缩小一点，但我找到了答案。在Wistia文档(https://wistia.com/support/developers/player-api)中，他们有这样的代码示例:

<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_abcde12345" style="width:640px;height:360px;"></div>
<script>
window._wq = window._wq || [];
_wq.push({ id: 'abcde12345', onReady: function(video) {
console.log("I got a handle to the video!", video);
}});
</script>

基本上，输入特定视频的ID，该函数中的任何内容只会在视频加载后加载。只需要删除开始部分的jquery，然后替换它。更新后的代码看起来像这样:

<script>
window._wq = window._wq || [];
_wq.push({ id: 'wd2eroj8k3', onReady: function(video) {
// All your code goes here
}});
</script>

这里是一个更新的提琴，仅供参考:https://jsfiddle.net/8z41cLtj/