How to add a Netflix-like resume watching feature to your Wix website.

the full code is at the bottom of the post.

Click here for a live example


In this blog post, I explain how you can automatically start playing your video from the time when the user stopped watching. This way someone can continue watching the video on another device or finish watching the video at another time.

For this example, we will use the wix video player element. This means you can use this tutorial for Youtube, Facebook, Twitch, Vimeo, Dailymotion or any other online mp4 file.

Step 1 Create a new database with a number field named duration.








Step 2 - saving the progress

First, we have to create a piece of code that will trigger our save function while the video is playing. We can do this by using setInterval().


To trigger out setInterval code we need to add the play event listener to our video player element through the Velo code penal.












let interval = 5000 // this sets how often the save get's triggered in ms
let videoInterval; 

export function videoPlayer1_play(event) {
    videoInterval = setInterval(()=> {
        saveVidProgress();  
    }, interval);
}

Then we have to create the function that saves the current watch time to the database. Because we don't want to create a crazy amount of database items we need to check if someone has already started watching the video before. This way we can reuse that item. To do this we query the dataset by the current user and video source. If we find a match we will use wixData.update() to update the watched time. If the user has not started watching the video before we will create a new item by using wixData.insert().


function saveVidProgress() {
 let videoSrc = $w('#videoPlayer').src
 let watchedTime = $w('#videoPlayer').currentTime
 
    wixData.query("videoProgress")
        .eq("_owner", userId)
        .eq("title", videoSrc)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 //if video progress was saved before
 let firstItem = results.items[0];
 
 let saveItem = {
 "_id": firstItem._id,
 "title": videoSrc,
 "duration": watchedTime
                }

                wixData.update("videoProgress", saveItem)

            } else {
 //if user is new
 let saveItem = {
 "title": videoSrc,
 "duration": watchedTime
                }

                wixData.insert("videoProgress", saveItem)
            }
        })
        .catch((err) => {
 let errorMsg = err;
        });

}

Now we have saved all the data that we need, we can code the most important part, the function that actually sets the video to the time that it was left at.


Step 3 - using the saved data

we will create a checkPrevProgress function where we query the video progress database to see if the logged-in user has started watching the video before. If this is the case we will move the video to the last saved timestamp by using the .seek() function on the video player.

$w.onReady(function () {
    checkPrevProgress()
});

function checkPrevProgress() {
 let videoSrc = $w('#videoPlayer').src

    wixData.query("videoProgress")
        .eq("_owner", userId)
        .eq("title", videoSrc)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 //if video progress was saved before
 let firstItem = results.items[0];
 let time = firstItem.duration
                $w('#videoPlayer').seek(time)

            } else {
 //if user is new
            }
        })
        .catch((err) => {
 let errorMsg = err;
        });

}

Yay! Now the video should resume where you left it.


but as always there is one more thing. Currently, the save video progress will continue running even when the user paused the video and is no longer watching. To fix this we can add some simple code to clear the interval that we set once the video is paused.


export function videoPlayer_pause(event) {
    clearInterval(videoInterval)
}

Congrats! Users will now be able to continue watching straight where they left off 🎉.

FULL-PAGE CODE


import wixData from 'wix-data';
import wixUsers from 'wix-users';

let user = wixUsers.currentUser;
let userId = user.id;
let interval = 5000 // this sets how often the save get's triggered in ms
let videoInterval;

$w.onReady(function () {
    checkPrevProgress()
});

function checkPrevProgress() {
 let videoSrc = $w('#videoPlayer').src

    wixData.query("videoProgress")
        .eq("_owner", userId)
        .eq("title", videoSrc)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 //if video progress was saved before
 let firstItem = results.items[0];
 let time = firstItem.duration
                $w('#videoPlayer').seek(time)

            } else {
 //if user is new
            }
        })
        .catch((err) => {
 let errorMsg = err;
        });

}

export function videoPlayer1_play(event) {
    videoInterval = setInterval(() => {
        saveVidProgress();
    }, interval);
}

function saveVidProgress() {
 let videoSrc = $w('#videoPlayer').src
 let watchedTime = $w('#videoPlayer').currentTime

    wixData.query("videoProgress")
        .eq("_owner", userId)
        .eq("title", videoSrc)
        .find()
        .then((results) => {
 if (results.items.length > 0) {
 //if video progress was saved before
 let firstItem = results.items[0];
 
 let saveItem = {
 "_id": firstItem._id,
 "title": videoSrc,
 "duration": watchedTime
                }

                wixData.update("videoProgress", saveItem)

            } else {
 //if user is new
 let saveItem = {
 "title": videoSrc,
 "duration": watchedTime
                }

                wixData.insert("videoProgress", saveItem)
            }
        })
        .catch((err) => {
 let errorMsg = err;
        });

}


export function videoPlayer_pause(event) {
    console.log("clearinverval")
    clearInterval(videoInterval)
}









Have a question?

Thanks for leaving your info. I'll get with you soon! 📱