Javascript - How to play ad at each array time?

lache
May 3, 2023
147 views
1 vote
2 Answers

I am trying to play/show a video Advertisement(just a h1 tag) at each index value in the array. For example; the first item in the array is 5. So at 5 seconds, I want the video to pause and play an ad. Then again at 10 seconds, then at 15. Assume the currentTime variable increments from 0 seconds to the end of the video. How can I trigger each ad to play when the currentTime value matches one of the adstream array index values?

    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);
    };

{#if showAd}
    <h1 class="p-4 text-white bg-red-500">{adStream}</h1>
{/if}

Answers

According to my understanding I have modified some javascript code for check if currentTime match value inside the array of adStartTimes

Like this below code :-

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

and playDummyAd function should accept the time

Like this below code :-

const playDummyAd = (resumeTime: number) => {

  setTimeout(() => {

    showAd = false; 
    currentTime = resumeTime;

    progress = Math.round ( ( currentTime /duration!) * 100);    
    
    videoElement.play();

  }, 5000);
};

Checking if the currentTime matches one of the adStartTimes values can be achieved with a reactive statement (since the user might seek, this should be independent of the index)

$: isAdStartTime = adStartTimes.some(t => Math.floor(currentTime) === t)
$: if(isAdStartTime) handleAdPlayback()

When there’s currently an ad played (probably unlikely, but still one of the adStartTimes might overlap with the length of an ad) or when the user is seeking over one of the start values, the playback should be prevented

async function handleAdPlayback(){
        if(playAd || seeking) return
        playAd = true
        ...
    }

REPL

<script>
    let video
    let currentTime
    let seeking

    let mainSrc = "https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
    let adSrc = 'https://static.vecteezy.com/system/resources/previews/021/520/113/mp4/abstract-falling-particle-animation-background-free-video.mp4'
    let src = mainSrc

    let adStartTimes = [5, 10, 15]

    let storedStreamTime
    let playAd = false
    let resumeMain = false

    $: isAdStartTime = adStartTimes.some(t => Math.floor(currentTime) === t)

    $: if(isAdStartTime) handleAdPlayback()

    async function handleAdPlayback(){
        if(playAd || seeking) return
        console.log('playAd - time', currentTime)
        playAd = true
        video.pause()
        storedStreamTime = currentTime
        src = adSrc //will trigger 'canplay'
    }

    function handleCanplay() {
        if(playAd) {
            console.log('canplay-playAd')           
            video.play()
        }
        if(resumeMain) {
            console.log('canplay-resumeMain')           
            video.play()
            resumeMain = false
        }
    }

    function handleEnded() {
        console.log('resume')
        if(!playAd) return
        playAd = false
        src = mainSrc //will trigger 'canplay'
        currentTime = storedStreamTime
        resumeMain = true
    }

</script>

<video controls
             bind:this={video}
             {src}
             bind:currentTime
             bind:seeking
             on:canplay={handleCanplay}
             on:ended={handleEnded}
             >
    <track kind="captions">
</video>

<style>
    video {
        width: 100%;
    }
</style>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to play ad at each array time?

Answers