1️⃣ Project Server Video dạng frame là gì?

Project Server Video dạng frame là một hệ thống xử lý & phân phối video hiện đại, hoạt động dựa trên nguyên lý chia nhỏ video thành các đoạn nhỏ (frame hoặc segment).

• Mục tiêu chính: giúp phát video mượt mà, giảm tải cho server & client, dễ dàng điều chỉnh chất lượng video phù hợp với tốc độ mạng (adaptive bitrate).

• Cách hoạt động:

  • Video gốc (thường ở định dạng mp4 hoặc m4p) được chia nhỏ thành nhiều đoạn video nhỏ (segment .ts) và một file playlist (.m3u8) để hướng dẫn player lấy từng segment.

  • Khi client phát video, nó chỉ tải từng đoạn cần thiết, giúp tiết kiệm băng thông & giảm buffer.

2️⃣ Đọc video dạng frame bằng HLS.js

Để phát video HLS trên web, bạn đang dùng thư viện hls.js.

• HLS (HTTP Live Streaming) là giao thức do Apple phát triển, dùng .m3u8 (playlist) và nhiều .ts (segment).

• Phần lớn trình duyệt (như Chrome, Firefox) không hỗ trợ HLS natively, nên cần hls.js để parse .m3u8 rồi stream video vào thẻ <video> HTML5.

🔥 Đoạn code JS mẫu để đọc file video

@section scripts{
    <script src="~/Content/js/hls.js"></script>
    <script>
        var video = document.getElementById('videoView');
        var videoSrc = '@serverData@Model.UrlVideo';

        if (Hls.isSupported()) {
            var hls = new Hls();
            hls.loadSource(videoSrc);
            hls.attachMedia(video);
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
            // Dành cho Safari (có hỗ trợ HLS native)
            video.src = videoSrc;
        }
    </script>
}

➡️ Nhờ đó:

• Trình duyệt nào hỗ trợ HLS native (Safari) thì chạy trực tiếp.

• Trình duyệt khác sẽ dùng hls.js load .m3u8 và play mượt mà.

3️⃣ Viết server bằng .NET MVC để chuyển video m4p thành HLS (dùng ffmpeg-7.1.1)

🎯 Tại sao cần chuyển?

Video tải lên thường là mp4 hoặc m4p. Muốn phát dạng HLS, bạn phải chuyển (transcode) thành các segment .ts + playlist .m3u8.
Công cụ chuyên dùng: ffmpeg 7.1.1.

💻 Ví dụ C# dùng ASP.NET MVC

📁 Cấu trúc thư mục

/uploads/videos/originals/abc.m4p
/uploads/videos/hls/abc.m3u8
/uploads/videos/hls/abc0.ts
/uploads/videos/hls/abc1.ts
...

🔥 Code C#

Giả sử bạn viết trong Controller:

public ActionResult ConvertToHls(string filename)
{
    string ffmpegPath = Server.MapPath("~/ffmpeg/bin/ffmpeg.exe");
    string inputPath = Server.MapPath("~/uploads/videos/originals/" + filename);
    string outputPath = Server.MapPath("~/uploads/videos/hls/" + Path.GetFileNameWithoutExtension(filename) + ".m3u8");

    var args = $"-i \"{inputPath}\" -profile:v baseline -level 3.0 -start_number 0 -hls_time 5 -hls_list_size 0 -f hls \"{outputPath}\"";

    var process = new System.Diagnostics.Process();
    process.StartInfo.FileName = ffmpegPath;
    process.StartInfo.Arguments = args;
    process.StartInfo.UseShellExecute = false;
    process.StartInfo.RedirectStandardOutput = true;
    process.StartInfo.RedirectStandardError = true;
    process.StartInfo.CreateNoWindow = true;

    process.Start();
    string output = process.StandardError.ReadToEnd(); // ffmpeg hay trả log qua stderr
    process.WaitForExit();

    return Json(new { success = true, log = output }, JsonRequestBehavior.AllowGet);
}

➡️ Dòng lệnh FFmpeg tương đương:

ffmpeg -i abc.m4p -profile:v baseline -level 3.0 -start_number 0 -hls_time 5 -hls_list_size 0 -f hls abc.m3u8

• -hls_time 5: chia segment ~5s.

• -hls_list_size 0: playlist không giới hạn số lượng segment.

🖥️ Cách phát

Sau khi convert xong, link public bạn trả về client sẽ trỏ đến:

/uploads/videos/hls/abc.m3u8

Sau đó chính đoạn:

hls.loadSource(videoSrc); // videoSrc = '/uploads/videos/hls/abc.m3u8'

sẽ tải playlist + từng segment .ts.

✅ Tóm lại:

• Bạn đã tạo Project server Video dạng frame dùng ASP.NET MVC để:

  • Nhận video m4p => convert sang HLS bằng ffmpeg.

  • Trả về URL .m3u8 cho client.

• Dùng hls.js ở frontend để parse .m3u8 & stream video segment theo yêu cầu, giúp tối ưu tốc độ và giảm tải server.