Video Streaming Service (with Credit Card Payments and Viewing History)

Purpose of Creating the Demo Site

I previously supported the development of a system for video distribution, and based on that experience, I built a demo environment for a fictional streaming service platform where individuals can distribute videos and earn revenue.

Overseas services like Udemy and Teachable, and in Japan services like note, are the closest models I had in mind. The assumption is that users purchase the content they want to watch and then view it. Content creators are also assumed to be individuals: they upload videos, set prices, and publish them.

Excluding customer-specific requirements, this demo app implements the minimum set of features generally required for a video streaming platform.

After introducing the app’s features, I also summarize what work was done and over what period, so that it can serve as a reference if you consider asking us to build an app with similar requirements.

Overview of the App

Content Search Screen

On this screen, viewers can search for the content (courses) they want to watch.

For each course, the “Course Title,” “Category,” “Number of Chapters,” and “Price” are displayed. If there are many courses and it’s hard to find what you want, you can narrow them down by category or by course title. When you find a course you’re interested in, clicking it takes you to the purchase screen for that content.

Purchase Screen for the Course You Want to Watch

The videos playing in this demo are free stock videos.

This screen shows detailed information about the selected content. On the left, the chapter titles are listed. If there are chapters that can be viewed before purchase, the video for that chapter will play. Typically, you would set something like an introductory chapter so that viewers can use it as material to judge, “Is this the course I want?” All other chapters are basically locked with a key icon and cannot be viewed until purchase.

The sales price is displayed directly below the video; clicking it takes you to the payment screen, and once payment is complete, you are returned to this screen and can watch all chapters.

Course Viewing Screen

The videos playing in this demo are free stock videos.

Once you purchase a course, the key icons are removed from all chapters and they become playable. By default, playback starts from the very first chapter. When one chapter is completed, it is marked as completed and the next chapter starts playing automatically.

Some chapters may have reference materials attached. Distributors can provide supplementary materials for parts that are difficult to fully explain in the video.

Even if you stop watching partway through, your viewing progress is recorded, so when you resume, you won’t have to wonder which chapter to start from.

A progress bar on the left menu shows how much of the course you have watched. Each time you finish watching a chapter, the progress rate increases, and once you have watched all chapters, it reaches 100%.

Viewer Dashboard

This is the first screen displayed after logging in. It shows a list of content the viewer has purchased.

Courses for which all chapters have been watched are counted as “Completed,” and that number of courses is displayed. Courses that still have unwatched chapters are counted as “In Progress,” and that number is also displayed.

For courses in progress, the progress rate is shown so you can immediately see how far along you are. If you want to resume watching, click the course to go to the course viewing screen.

From here on, the screens are for distributors.

Distributor Course List Screen

From here on, the screens are for distributors.

This screen shows a list of courses that have already been created. It displays the “Course Title,” “Sales Price,” and “Publication Status.”

There is a button in the upper right to create a new course; clicking it takes you to the course creation screen.

On the course creation screen, you enter the course title and click the register button, after which the course is registered and you are taken to the course editing screen.

Course Editing Screen

On this screen you can set the course “Description,” “Eyecatch Image,” “Category,” “Sales Price,” and “Attachments for Course Materials,” among other things.

You can also edit the course title you registered earlier here.

When a course is first created, it is set to private. On the upper right of the screen, you’ll see something like “(1/6) Entered.” To publish a course, six items must be entered. Those six items, excluding attachments, are:

Course Title
Course Description
Eyecatch
Category
Chapters
Sales Price

Until then, the course remains in draft status, but we’ll proceed as is for now.

As for where to register the actual videos, that is done in the chapters. In the chapter list, click the Add button and register a chapter name; this takes you to the chapter editing screen.

Chapter Editing Screen

On this screen you can edit the chapter “Title,” “Description,” “Video Settings,” and so on.

As with courses, chapters are private when first created. Once you complete the “Title,” “Description,” and “Video Settings,” you can publish the chapter. The upper right shows text like “(1/3) Entered,” and when it becomes “(3/3),” the Publish button becomes active and you can publish.

Earlier, on the viewer side, I introduced the course purchase screen and mentioned that some chapters can be viewed before purchase. That setting is configured here. To allow this chapter to be viewed before purchase, check the appropriate option in the access rights settings, and it will be viewable prior to purchase.

Once you have finished entering the required items, click Publish, then click “Return to Course Editing” in the upper right.

Editing Content

Once a chapter is published, the chapter that previously showed as Draft will now be displayed as Published.

After you finish entering the required items other than chapters, it will show “(6/6) Entered,” and the Publish button will become active. Clicking it successfully publishes the course, making it available for viewers to search and purchase.

You can set multiple chapters, but initially they are simply ordered in the sequence they were registered. If you want to change the order in which they are shown to viewers, you can reorder them via drag and drop.

Sales Performance List Screen

Finally, here is the sales performance list screen, where you can check the sales status of your content.

This screen shows the total sales amount and number of units sold for the courses provided by the video distributor. It also displays a graph of sales amounts by course, allowing you to quickly see which courses are selling.

You can also view daily sales trends and check patterns such as day-of-week tendencies.

Work Done for This Project

Here is a summary of the work carried out this time. Our company can implement these tasks in roughly 2–3 months.

1. Environment Setup

Authentication service configuration
Database configuration
Test page creation
Program deployment
Access via temporary URL

2. [For Distributors] Course Creation Screen

Screen creation
Course creation API

3. [For Distributors] Course Editing Screen

Title input form creation
Description input form creation
Eyecatch image upload form creation
File server configuration
Image upload API
Price input form creation
Course editing API

4. [For Distributors] Chapter Creation Form

Form creation
Chapter creation API
Chapter reordering feature
Chapter reordering API
Chapter deletion API

5. [For Distributors] Chapter Editing Screen

Screen creation
Title editing form creation
Description input form creation
Access rights settings form creation
Video upload form creation
Video streaming server configuration
Video upload API
Video viewing form creation
Video download API

6. [For Distributors] Publication Settings

Button to toggle chapter public/private
API for the above toggle
Button to toggle course public/private
API for the above toggle

7. [For Viewers] Course Search Screen

Screen creation
Category list creation
Search title input form creation
Search functionality by title and category
Course list retrieval API

8. [For Viewers] Course Detail Screen

Chapter list creation
Video viewing form creation
Course detail retrieval API
Video download API

9. [For Viewers] Course Purchase Screen

Payment service configuration
Functionality to display course purchase payment screen
API to receive payment result notifications

10. [For Viewers] Course Detail Screen

Video viewing history update API

11. [For Viewers] Dashboard

Screen creation
Course list retrieval API
Course progress list retrieval API
Filter function for Incomplete/Completed

12. [For Distributors] Sales Performance Screen

Screen creation
Graph of sales amount by course
Graph of daily sales trends
Aggregation result retrieval API

Future Extensions of This Demo Environment

The features introduced so far have been limited to the minimum necessary to provide a video streaming platform. By adding features like those below, we believe convenience can be further improved and the potential to expand the user base will increase.

Of course, not all of these are strictly necessary. When you request app development from us, we will discuss which features are needed or not, and whether to include them in the initial release or not, so that we can help you introduce the system efficiently and as early as possible.

User Management Features

For viewers, a login function is already implemented, so no major changes are needed, but for video distributors, additional implementation needs to be considered.

For distributors, it would be better to introduce mechanisms such as pre-screening after receiving an application, and allowing app administrators to suspend videos or accounts if illegal videos are uploaded. This would help improve the reliability of the app.

Also, by providing features that allow distributors with qualifications or extensive experience to publish their profiles, you can create a flow that lets viewers purchase with greater peace of mind.

Test-Taking Features

By allowing viewers to take an online test after watching the videos and, if they exceed a certain correct answer rate, marking the course as completed and issuing a certificate, the act of watching videos can become more meaningful.

Features to Increase Interaction Between Viewers and Distributors

Examples include a bulletin board where viewers can ask questions about parts of the video they don’t understand, or a one-on-one video call feature (online consulting service) for direct communication. By also enabling billing for consulting services, distributors may be more motivated to invest effort into their content.

In Closing

I will be publishing a blog article introducing the implementation details in the near future.