Skapi

Posted on Sep 19

How to Create a Video Streaming Platform with HTML, CSS, JS, and Skapi

#javascript #tutorial #programming #beginners

These days, we all stream everything: movies, shows, random videos we find online. But the big streaming platforms often come with strict rules, changing algorithms, and sometimes even censorship.

For small creators, that can be exhausting. So many creators are taking a different path: building their own little streaming spaces. Smaller, more personal platforms where they can share what they want, connect directly with their audience, and stay in control over their content.

Building your own platform can be tough, especially when it comes to setting up the backend and database. In this guide, we’ll explain step-by-step so even beginners can follow along and create a working video-on-demand platform in a single afternoon.

Meet Skapi

Skapi is here to help you do it, taking away the stress of developing a web infrastructure and allowing you to focus on giving your viewers the best experience. Thanks to Skapi, a modern backend-as-a-service (BaaS), you can set up user accounts, video uploads, and content delivery using just HTML, CSS, and JavaScript. No servers, no complicated set up, just a few lines of code.

Getting Started

Connecting your project with Skapi is a very easy process. You can follow a step-by-step guide on how to do it in our No More Backend Setup: Launch Your App with Skapi in Minutes article.

Adding User Authentication

Every video streaming platform needs user accounts. Skapi makes this simple with built-in signup and login methods.

Signup Example


let parameters = {
  email: "user@email.com",
  password: "password", // Password must be between 6 and 60 characters.
  name: "User's name"
};

let options = {
  login: true // If set to true, users will be automatically logged in after signup.
};

skapi.signup(parameters, options)
  .then(res => u=>alert('Hello ' + u.name));

Login Example


let parameters = {
  email: 'user@email.com',
  password: 'password'
}

skapi.login(parameters)
  .then(user => window.href = 'welcome.html');

Once logged in, users can upload videos or view restricted content depending on your settings.

Uploading Videos

To upload videos and any other file, you can use the method highlighted in The Easiest Way to Add File Upload to Your Website article. But just as a quick example, here’s how to do it with a form:

<form onsubmit="skapi.postRecord(event, {
    table: {
        name: 'videos',
        access_group: 'public'
    })>
  <input name="title" placeholder="Video Title" />
  <input name="description" placeholder="Video Description" />
  <input name="video" type="file"/>
  <input type="submit" value="Submit" />
</form>

On submitting the form, your video will be uploaded to Skapi via the postRecord() method, making it instantly available to be watched.

Display Videos on Your Platform

Fetch all uploaded videos and display them in a simple gallery with HTML5 video tags.

<div id="videoGallery"></div>

<script>
async function loadVideos() {
  let videos = await skapi.getRecords({ table: 'videos' });

  const gallery = document.getElementById('videoGallery');
  gallery.innerHTML = videos.list.map(v => `
    <div>
      <h3>${v.title}</h3>
      <video src="${v.bin[0].url}" controls width="480"></video>
    </div>
  `).join('');
}

loadVideos();
</script>

This gives you a dynamic video feed — as soon as someone uploads a video, it appears for viewers.

Adding Premium Content

Sometimes you’ll want to control who can see your content.
When posting any type of record to Skapi, one of the config options is access_group. This is used to limit the visibility of the record, and is used as such:


let config = {
    table: {
name: string;
access_group?: number | 'private' | 'public' | 'authorized' | 'admin';  // Default: 'public'
}
};

The access_group config is optional and defaults to public if not specified. The possible settings are:

number: Integer from 0 to 99. Compares the record access requirement to the user profile access level. Only users with access levels equal or greater than the record’s requirement may see it. User's access level can be upgraded from the "Users" page in Skapi service dashboard.
private: Only the uploader is allowed to have access to the record. The uploader can give access to others.
public: Everyone can see the record. (Equivalent to number: 0)
authorized: Only people logged to the project may see the record. (Equivalent to number: 1)
admin: Only the admins of your service will be allowed to view this record. (Equivalent to number: 99)

Want to charge for videos or keep some content exclusive?

Set access_group: 2 to 4 for example, when uploading.
Now you have tiered content, all you need to do is charge to upgrade users accounts to higher tiers.

Subscriptions

Another important aspect of streaming is being able to subscribe to your preferred content creators. Using Skapi’s subscriptions system you won’t have to worry about designing a whole subscription pipeline. It’s all ready to be used.

When uploading a video, you can choose to make it available only to your subscribers, like this:

skapi.postRecord(videoData, {
  table: {
    name:'videos',
    access_group: 'authorized',
    subscription: {
      is_subscription_record: true
    }
}})

This will make it so that only users subscribed to the uploader will be able to see the video.
And to subscribe is even easier, just use the subscribe() method, like this:

skapi.subscribe({
  user_id: 'user_id_of_user_A',
});

And now you can have subscriber only content in your platform, allowing another type of exclusivity to your users.

That's it!

As you can see, Skapi empowers you to create a streaming platform with full user authentication, tiered content and subscriptions, all without writing a single backend line of code.

Simply connect your project to a Skapi service and you can start your own streaming platform today.

DEV Community