Making a website for an online video course

General Web Dev
1

I want to make a website for an online video course that I am selling. I don’t want to use platforms such as Coursera and stuff like that. I tried making the fron-end with Angular and the Back-End with ASP.NET Server that connects with firebase database and storage for the videos. The problem was with the download and upload of large videos through the firebase - server - client pipeline. Can you suggest approaches and ways to fix it or start from scratch with different technologies. If you had to make a similar website, how would you do it? (Videos have to be stored on the cloud)

2

I should at least have a look at a combination of Go and HLS streaming. Others may have different opinions.

1 Like
3

Like @sibertius pointed out you need FFmpeg to convert mp4 to m3u8. The example they show is for music file. For mp4 I use the following command:

ffmpeg -i ${your_mp4_file} -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls ${your_output_m3u8_file}

For example:

ffmpeg -i lesson_1.mp4 -codec: copy -start_number 0 -hls_time 10 -hls_list_size 0 -f hls lesson_1.m3u8

I suggest creating directories for each lesson. Like for lesson_1 directory will have the m3u8 and ts files for lesson 1

Once done, you’ll need what is call a m3u8 player to run on the browser. No worries, easy peazy.

I used this javascript library: Videojs

I’ll show a quick dirty example of my Html that I created using python Flask but it will be very similar if you use Go or Asp.Net. The more important thing is to point your source to the m3u8 file and the javascript will start streaming the hs files.

<html>

<head>
    <link href="static/css/video-js.css" rel="stylesheet" />
    <link href="static/css/custom.css" rel="stylesheet" />
</head>

<body>
    <div class="video-container">
        <video id="my-video" class="video-js" controls preload="auto" width="840" height="464"
            poster="static/images/me_zen.png" data-setup='{}'>
            <h1>The filename is: {{ filename }}</h1>
            {% if filename %}
            <source src="{{ filename }}" type="application/x-mpegURL">
            {% else %}
            <source src="static/videos/ocean/sample_2.m3u8" type="application/x-mpegURL">
            {% endif %}
        </video>
    </div>

    <script src="static/js/video.min.js"></script>

</body>

</html>

If you decide to do it in Python. I can give you the link to my Github full code sample.

Good luck

1 Like
4

Your approach to building an online video course website using Angular for the front-end, ASP.NET Server for the back-end, and Firebase for database and storage sounds solid. It’s great that you’ve already identified the specific issue you’re facing with video uploads and downloads and are seeking advice on how to overcome it.

Dealing with large video files in a cloud-based environment can indeed present challenges, especially when it comes to optimizing the upload and download processes. It’s essential to ensure that the pipeline you’re using can efficiently handle the size and volume of video content you anticipate dealing with.

Considering your requirement for storing videos on the cloud, one approach you might explore is implementing a dedicated video streaming solution. Platforms like AWS Elemental MediaStore or Azure Media Services offer features specifically designed for high-performance video delivery, including support for adaptive bitrate streaming, which can enhance the viewing experience for your users.

Additionally, you might want to look into optimizations at various levels of your application stack, such as implementing chunked uploading for large files to improve reliability and performance, leveraging content delivery networks (CDNs) for faster content delivery to users worldwide, and optimizing network configurations to reduce latency during uploads and downloads.

If you’re open to exploring alternative technologies, you might consider using a different cloud storage provider or investigating specialized video hosting platforms that offer built-in support for handling large video files efficiently.

Overall, it’s great that you’re proactively seeking advice and considering different options to address the challenges you’re facing. With the right optimizations and possibly some adjustments to your technology stack, you should be able to overcome the current hurdles and deliver a seamless online learning experience for your users.

5

Be careful using FFmpeg for commercial projects. From the license:

FFmpeg incorporates several optional parts and optimizations
that are covered by the GNU General Public License (GPL)
version 2 or later. If those parts get used the GPL
applies to all of FFmpeg.

So you can easily run into a trap…

1 Like
6

Another alternative is to load your videos to Youtube.
For what I read the maximum youtube file size to upload is the crazy 256 GB, but I doubt your file anywhere near that. When you upload the video Youtube will take care of creating proper encoding and different qualities of video depending on the network.

Once than that just copy the embeded html snippet of the videos on your website.
Set the monetization flag to false, so your video will not show advertisements and set the flag to private.

Only the people you invite to see the video can see it.

I think this check all the marks of what you want. It is cloud base, you don’t need to do encoding and it is free.

The only drawback is your students will have to have a google account (gmail).

All the best