一、后端

1.后端采用.net6.0 + Xabe.FFmpeg 实现，Xabe.FFmpeg包将FFmpeg的操作进行了封装，使用者只需要对封装的对象进行操作，就可以完成相关的格式转化操作。
2.以下是核心代码及其注释：

// 获取媒体信息
            IMediaInfo mediaInfo = await FFmpeg.GetMediaInfo(inputFilePath);
            // 获取视频流
            IStream videoStream = mediaInfo.VideoStreams.FirstOrDefault()?.SetCodec(VideoCodec.libx264);
            // 获取音频流
            IStream audioStream = mediaInfo.AudioStreams.FirstOrDefault()?.SetCodec(AudioCodec.aac);
            // 创建一个转换对象
            var conversion = FFmpeg.Conversions.New()
                // 添加音频流和视频流
                .AddStream(audioStream, videoStream)
                // 设置 HLS 相关参数
                .AddParameter("-hls_list_size 0")
                .AddParameter("-hls_time 15")
                // 设置输出格式为 M3U8
                .SetOutputFormat(Format.hls)
                // 设置输出路径
                .SetOutput($"{outputDirectory}\\output.m3u8")
                // 设置覆盖输出
                .SetOverwriteOutput(true)
                // 禁用多线程
                .UseMultiThread(true)
                // 设置转换预设
                .SetPreset(ConversionPreset.UltraFast);
            // 添加进度日志
            conversion.OnProgress += async (sender, args) =>
            {
                // 输出转换进度
                await Console.Out.WriteLineAsync($"[{args.Duration}/{args.TotalLength}][{args.Percent}%] 333.mp4");
            };
            // 开始转换
            await conversion.Start();

3.iis站点发布需要添加的MIME类型：.m3u8、.ts和.keyMIME类型（很重要）

       <mimeMap fileExtension=".m3u8" mimeType="application/x-mpegURL" />
       <mimeMap fileExtension=".ts" mimeType="video/MP2T" />
       <mimeMap fileExtension=".key" mimeType="application/x-mpegURL" />

4.浏览器跨域解决有两种方案：
1）前端代理解决跨域
2）iis站点的webconfig文件增加以下代码即可解决跨域问题：

<httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="*" />
                <add name="Access-Control-Allow-Headers" value="*" />
            </customHeaders>
              </httpProtocol>

5.以下是完整的webconfig代码：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <directoryBrowse enabled="true" />
<httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
                <add name="Access-Control-Allow-Methods" value="*" />
                <add name="Access-Control-Allow-Headers" value="*" />
            </customHeaders>
        </httpProtocol>
        <staticContent>
            <remove fileExtension=".ts" />
            <mimeMap fileExtension=".m3u8" mimeType="application/x-mpegURL" />
            <mimeMap fileExtension=".ts" mimeType="video/MP2T" />
            <mimeMap fileExtension=".key" mimeType="application/x-mpegURL" />
        </staticContent>
    </system.webServer>
</configuration>

二、前端

1.前端采用ckplayer.js来实现m3u8流的历史播放和记忆播放，以下是ckplayer.js官网，仅供参考。
https://www.ckplayer.com/manual/13.html