如何在 DOM 中完全加载视频后将 Javascript 变为运行

Question

如何确保我的 Javascript 始终在加载嵌入的 Wistia 视频后加载？

我有一个嵌入了 Wistia 视频的页面，还有一些 Javascript 正在尝试执行以下操作：

检测视频的播放按钮（和全屏按钮）
当播放按钮被点击（或再次点击，也就是暂停）时监听
单击播放按钮时启动计时器
视频暂停时暂停计时器
经过足够的时间后，揭示一些隐藏的内容

我在测试期间进行了此操作，但后来我意识到它在大多数情况下都失败了，因为在加载 Wistia 视频之前我的 Javascript 是运行，因此它找不到我需要添加事件监听器的视频元素。

我试图查找延迟 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>

更新后的Fiddle，仅供参考：https://jsfiddle.net/8z41cLtj/

如何在 DOM 中完全加载视频后将 Javascript 变为运行

How to get Javascript to run after a video has fully loaded in the DOM

html

javascript

video

jquery

wistia

如何在 DOM 中完全加载视频后将 Javascript 变为 运行

How to get Javascript to run after a video has fully loaded in the DOM

html

javascript

video

jquery

wistia

如何在 DOM 中完全加载视频后将 Javascript 变为运行