Back

Technologies:

javascriptjavascript
avatar
Tolerim
24 days ago

What is the process of displaying an ad for each array iteration?

I need to play a video advertisement at specific points in time based on an array of index values. For example, if the array contains 5, 10, and 15, the ad should play at 5 seconds, 10 seconds, and 15 seconds. To achieve this, I have a JavaScript code snippet. However, I need to make sure that the ad plays only when the current time of the video matches one of the index values from the array. Currently, I'm manually setting the first index of the array and checking if the current time matches it. If it does, I pause the original video, store its progress and time, switch to the ad video, and show the overlayed ad video. If the ad is showing, I play the dummy ad. After the ad ends, I resume the original video. All of this is implemented through the use of the given code and variables. Here's the code:

    let adStream: string;
    let currentTime = 0;
    let showAd: boolean = false;
    let adStartTimes: Array<number> = [5, 10, 15];  //How to trigger on each value in array???
    let storedStreamTime: number;
    let storedProgress: number;
    
    //Manually setting first index of array, but really want to check for matching index???
    $: if (Math.round(currentTime) === adStartTimes[0]) {
        //Pause the original video...
        videoElement && videoElement.pause();
        //Store the original progress and time...
        storedStreamTime = Math.round(currentTime);
        storedProgress = Math.round((currentTime / duration!) * 100);
        //Switch to the ad video, this should be the URI eventually, just a string for now...
        adStream = 'Ad Playing';
        //Show overlayed ad video...
        showAd = true;
    }

    //play the ad if showing...
    $: if (showAd) {
        playDummyAd();
    }

    const playDummyAd = () => {
        //after 5 second ad is done...
        setTimeout(() => {
            console.log('ad played');
            showAd = false;

            //return to current video time...
            currentTime = storedStreamTime + 1;
            progress = storedProgress + 1;

            //resume play of original video...
            videoElement.play();
        }, 5000);
    };
To display the ad message, I have another code snippet:

{#if showAd}
    <h1 class="p-4 text-white bg-red-500">{adStream}</h1>
{/if}
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
You can use a loop to iterate over the array and check if the current time matches any of the values in the array. Here's an example code snippet that you can use: 
let adStream = "";
let currentTime = 0;
let showAd = false;
let adStartTimes = [5, 10, 15];
let storedStreamTime;
let storedProgress;

for (let i = 0; i < adStartTimes.length; i++) {
    if (Math.round(currentTime) === adStartTimes[i]) {
        videoElement.pause();
        storedStreamTime = Math.round(currentTime);
        storedProgress = Math.round((currentTime / duration!) * 100);
        adStream = "Ad Playing";
        showAd = true;
    }
}

if (showAd) {
    playDummyAd();
}

const playDummyAd = () => {
    setTimeout(() => {
        console.log("ad played");
        showAd = false;
        currentTime = storedStreamTime + 1;
        progress = storedProgress + 1;
        videoElement.play();
    }, 5000);
};
This code snippet uses a for loop to iterate over the adStartTimes array and check if the current time matches any of the values in the array. If it does, it sets the showAd variable to true and calls the playDummyAd() function. I hope this helps! Let me know if you have any other questions.

Sources

Loop (for each) over an array in JavaScript - Stack OverflowArray.prototype.forEach() - JavaScript | MDN - Mozilla DeveloperJavaScript Array Iteration - W3Schooljavascript each - js foreach - javascript array foreach AskavyRun JavaScript
avatar
Tolerim
24 days ago
To trigger each ad to play when the currentTime value matches one of the adstream array index values, you can loop through adStartTimes array using forEach() method and check if the current time matches each of the values. If there's a match, you can pause the original video, store the current progress and time, switch to the ad video, show the overlayed ad video and play the ad. Here's an updated code snippet that demonstrates how to accomplish this: 
let adStream = '';
let currentTime = 0;
let showAd = false;
let adStartTimes = [5, 10, 15];
let storedStreamTime = 0;
let storedProgress = 0;

adStartTimes.forEach((time) => {
  if (Math.round(currentTime) === time) {
    //Pause the original video...
    videoElement && videoElement.pause();
    //Store the original progress and time...
    storedStreamTime = Math.round(currentTime);
    storedProgress = Math.round((currentTime / duration!) * 100);
    //Switch to the ad video, this should be the URI eventually, just a string for now...
    adStream = 'Ad Playing';
    //Show overlayed ad video...
    showAd = true;
  }
});

//play the ad if showing...
if (showAd) {
  playDummyAd();
}

const playDummyAd = () => {
  //after 5 second ad is done...
  setTimeout(() => {
    console.log('ad played');
    showAd = false;

    //return to current video time...
    currentTime = storedStreamTime + 1;
    progress = storedProgress + 1;

    //resume play of original video...
    videoElement.play();
  }, 5000);
};
In this example, we use the forEach() method to loop through the adStartTimes array and check if the current time matches each of the values. If there's a match, we pause the original video, store the current progress and time, switch to the ad video, show the overlayed ad video and play the ad. Finally, we play the original video after the ad is done playing.
;