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

Show and tell
, ,
1

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 for Youtube, Facebook, Twitch, Vimeo, Dailymotion, or any other online mp4 file.

I posted the full code here for people who are a bit more experienced with Velo but don’t want to do the whole thing themselves. Read my blog if you need some more guidance on how to implement this and know what everything does.

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)
}
5 Likes
2

I’ll use this very good job!