Hướng Dẫn Tạo Nền Tảng Phát Video Với HTML, CSS, JS và Skapi

Ngày nay, việc phát video trực tuyến đã trở thành một phần không thể thiếu trong cuộc sống của chúng ta. Từ phim ảnh, chương trình truyền hình đến những video ngẫu nhiên trên internet, mọi thứ đều có thể được phát trực tuyến. Tuy nhiên, các nền tảng phát video lớn thường đi kèm với những quy định nghiêm ngặt, thuật toán thay đổi liên tục và đôi khi là kiểm duyệt nội dung.

Đối với các nhà sáng tạo nhỏ, điều này có thể trở nên mệt mỏi. Nhiều người đã chọn con đường khác: xây dựng các không gian phát video riêng, nhỏ hơn, thân thiện hơn, nơi họ có thể chia sẻ nội dung mình muốn, kết nối trực tiếp với khán giả và kiểm soát nội dung của mình.

Việc xây dựng nền tảng riêng có thể khó khăn, đặc biệt là khi thiết lập backend và cơ sở dữ liệu. Trong hướng dẫn này, chúng tôi sẽ giải thích từng bước để ngay cả những người mới bắt đầu cũng có thể theo dõi và tạo ra một nền tảng video theo yêu cầu chỉ trong một buổi chiều.

Giới Thiệu Về Skapi

Skapi là một giải pháp giúp bạn đơn giản hóa việc phát triển hạ tầng web, cho phép bạn tập trung vào việc mang lại trải nghiệm tốt nhất cho người xem. Nhờ vào Skapi - một dịch vụ backend-as-a-service (BaaS) hiện đại, bạn có thể thiết lập tài khoản người dùng, tải video lên và phân phối nội dung chỉ với HTML, CSS và JavaScript. Không cần máy chủ, không cần thiết lập phức tạp, chỉ với vài dòng mã.

Bắt Đầu Với Skapi

Kết nối dự án của bạn với Skapi là một quá trình rất đơn giản. Bạn có thể theo dõi hướng dẫn từng bước trong bài viết Không Cần Thiết Lập Backend: Khởi Động Ứng Dụng Của Bạn Với Skapi Trong Vài Phút.

Thêm Chức Năng Xác Thực Người Dùng

Mọi nền tảng phát video đều cần có tài khoản người dùng. Skapi giúp điều này trở nên dễ dàng với các phương thức đăng ký và đăng nhập tích hợp sẵn.

Ví Dụ Đăng Ký

let parameters = {
  email: "user@email.com",
  password: "password", // Mật khẩu phải từ 6 đến 60 ký tự.
  name: "Tên người dùng"
};

let options = {
  login: true // Nếu được đặt thành true, người dùng sẽ tự động đăng nhập sau khi đăng ký.
};

skapi.signup(parameters, options)
  .then(res => alert('Xin chào ' + res.name));

Ví Dụ Đăng Nhập

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

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

Sau khi đăng nhập, người dùng có thể tải video lên hoặc xem nội dung hạn chế tùy thuộc vào cài đặt của bạn.

Tải Video Lên

Để tải video và bất kỳ tệp nào khác, bạn có thể sử dụng phương thức được nêu trong bài viết Cách Dễ Nhất Để Thêm Tải Tệp Vào Website Của Bạn. Nhưng chỉ với một ví dụ nhanh, đây là cách thực hiện với một form:

<form onsubmit="skapi.postRecord(event, {
    table: {
        name: 'videos',
        access_group: 'public'
    }
})">
  <input name="title" placeholder="Tiêu đề Video" />
  <input name="description" placeholder="Mô tả Video" />
  <input name="video" type="file"/>
  <input type="submit" value="Gửi" />
</form>

Khi gửi biểu mẫu, video của bạn sẽ được tải lên Skapi thông qua phương thức postRecord(), làm cho nó ngay lập tức có sẵn để xem.

Hiển Thị Video Trên Nền Tảng Của Bạn

Lấy tất cả video đã tải lên và hiển thị chúng trong một thư viện đơn giản với thẻ video HTML5.

<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>

Điều này mang lại cho bạn một luồng video động — ngay khi ai đó tải lên một video, nó sẽ xuất hiện cho người xem.

Thêm Nội Dung Cao Cấp

Đôi khi bạn sẽ muốn kiểm soát ai có thể thấy nội dung của bạn. Khi đăng bất kỳ loại record nào lên Skapi, một trong các tùy chọn cấu hình là access_group. Điều này được sử dụng để giới hạn khả năng hiển thị của bản ghi.

let config = {
    table: {
name: string;
access_group?: number | 'private' | 'public' | 'authorized' | 'admin';  // Mặc định: 'public'
}
};

Cấu hình access_group là tùy chọn và mặc định là công khai nếu không chỉ định. Các cài đặt có thể là:

• number: Số nguyên từ 0 đến 99. So sánh yêu cầu truy cập của bản ghi với cấp độ truy cập của hồ sơ người dùng. Chỉ những người dùng có cấp độ truy cập bằng hoặc cao hơn yêu cầu của bản ghi mới có thể thấy nó.
• private: Chỉ người tải lên được phép truy cập bản ghi. Người tải lên có thể cấp quyền truy cập cho người khác.
• public: Mọi người đều có thể xem bản ghi. (Tương đương với number: 0)
• authorized: Chỉ những người đã đăng nhập vào dự án mới có thể xem bản ghi. (Tương đương với number: 1)
• admin: Chỉ có các quản trị viên của dịch vụ của bạn mới được phép xem bản ghi này. (Tương đương với number: 99)

Bạn muốn tính phí cho video hoặc giữ một số nội dung độc quyền?

• Đặt access_group: 2 đến 4 khi tải lên.
• Bây giờ bạn có nội dung theo cấp độ, tất cả những gì bạn cần làm là tính phí để nâng cấp tài khoản người dùng lên các cấp độ cao hơn.

Đăng Ký

Một khía cạnh quan trọng khác của việc phát trực tuyến là khả năng đăng ký theo dõi các nhà sáng tạo nội dung mà bạn yêu thích. Sử dụng hệ thống đăng ký của Skapi, bạn sẽ không phải lo lắng về việc thiết kế toàn bộ quy trình đăng ký. Nó đã sẵn sàng để sử dụng.

Khi tải video lên, bạn có thể chọn chỉ cho phép người đăng ký của mình xem, như sau:

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

Điều này sẽ làm cho chỉ những người dùng đã đăng ký với người tải lên mới có thể xem video. Và để đăng ký còn dễ hơn, chỉ cần sử dụng phương thức subscribe(), như sau:

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

Và bây giờ bạn có thể có nội dung chỉ dành cho người đăng ký trên nền tảng của mình, cho phép một loại độc quyền khác cho người dùng của bạn.

Kết Luận

Như bạn thấy, Skapi giúp bạn tạo ra một nền tảng phát video với đầy đủ chức năng xác thực người dùng, nội dung theo cấp độ và đăng ký, tất cả mà không cần viết một dòng mã backend nào.

Chỉ cần kết nối dự án của bạn với dịch vụ Skapi và bạn có thể bắt đầu nền tảng phát video của riêng mình ngay hôm nay. Hãy theo dõi chúng tôi trên các mạng xã hội: X, YouTube, Instagram, LinkedIn. Nhiều hướng dẫn, mã nguồn và mẹo phát triển sẽ sớm có mặt!