video html hls • 三七の小站

nginx

server {
    listen 35005;
    server_name _;  # 或者你的域名或 IP

    # 设置根目录为 Windows 的视频文件夹
    root C:/Users/Administrator/Videos/s01e01;
    index index.html;

    # HLS 配置
    location /hls {
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        add_header Cache-Control no-cache;
        add_header Access-Control-Allow-Origin *;
    }
}

Windows文件夹大小

$size = (Get-ChildItem -Path "s01e01" -Recurse -File | Measure-Object -Property Length -Sum).Sum;
if ($size -gt 1GB) { "{0:N2} GB" -f ($size / 1GB) } elseif ($size -gt 1MB) { "{0:N2} MB" -f ($size / 1MB) } elseif ($size -gt 1KB) { "{0:N2} KB" -f ($size / 1KB) } else { "$size 字节" }

ffmpeg

ffmpeg -i Forged.In.Fire.S01e01.Japanese.Katana.1080P.Amzn.Web-Dl.Ddp2.0.H.264-Playweb.mkv -c:v copy -c:a copy -f hls -hls_time 10 -hls_list_size 0 -hls_segment_type mpegts -hls_segment_filename "s01e01/segment_%03d.ts" s01e01.m3u8

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HLS Video Player</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-900 to-indigo-800 text-white flex flex-col items-center justify-center min-h-screen">
    <!-- 标题 -->
    <h1 class="text-3xl md:text-4xl font-bold mb-6 text-center text-gray-100">
        HLS Video Player
    </h1>

    <!-- 视频播放器容器 -->
    <div class="w-full max-w-4xl p-4">
        <video id="videoPlayer" class="w-full rounded-lg shadow-lg" controls>
            <source src="/hls/output.m3u8" type="application/vnd.apple.mpegurl">
            Your browser does not support the video tag.
        </video>
    </div>

    <!-- Hls.js 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
        if (Hls.isSupported()) {
            var video = document.getElementById('videoPlayer');
            var hls = new Hls();
            hls.loadSource('/hls/output.m3u8');
            hls.attachMedia(video);
            hls.on(Hls.Events.MANIFEST_PARSED, function() {
                video.play();
            });
        }
    </script>
</body>
</html>