为什么需要HLS？#

传统的视频播放方式通常需要等整个文件下载完成后才能播放，或者至少下载足够多的数据才能开始。这对于大文件来说体验很差。HLS（HTTP Live Streaming）解决了这个问题，它把视频切成小片段，让播放器可以边下边播，用户几乎感觉不到等待。

最近看到有人用Dash实现类似功能，我想HLS同样值得介绍，特别是它的配置和使用相对简单。

效果呢？#

你可以点击这里查看效果

三步让你的视频“流”起来#

第一步：准备你的视频文件#

你有个myvideo.mp4文件，我们需要把它转换成HLS格式。这里我们需要用到FFmpeg（神器不用多说）

1
ffmpeg -i myvideo.mp4 -c copy -hls_time 4 -hls_list_size 0 -hls_segment_filename "video_%03d.ts" myvideo_playlist.m3u8

转换完成后，你会得到：

playlist.m3u8 - 播放列表文件（告诉播放器按什么顺序播放）
video_001.ts、video_002.ts… - 视频切片文件

这就好比把一本书拆成了很多页，用户可以一页一页地看，不用等整本书下载完。

第二步：把文件放到网上#

接下来，把这些文件上传到任意支持HTTP访问的地方：

CloudFlare Pages：免费，全球CDN，推荐
GitHub Pages：如果你已经有GitHub项目
Vercel/Netlify：也很方便
自己的服务器：配置nginx或Apache

上传后确保可以通过类似这样的URL访问到你的文件：

1
https://你的域名/videos/playlist.m3u8
2
https://你的域名/videos/video_001.ts

第三步：在网页中播放#

创建一个HTML文件，加入以下代码：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>HLS播放示例</title>
5
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.6.13/hls.min.js"></script>
6
    <style>
7
        video {
8
            max-width: 100%;
9
            border-radius: 8px;
10
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
11
        }
12
        .container {
13
            max-width: 800px;
14
            margin: 40px auto;
15
            padding: 20px;
16
        }
17
    </style>
18
</head>
19
<body>
20
    <div class="container">
21
        <h2>HLS视频播放演示</h2>
22
        <video id="video" controls></video>
23
    </div>
24

25
    <script>
26
    document.addEventListener('DOMContentLoaded', function() {
27

28
        const video = document.getElementById('video');
29
        const hls = new Hls();
30
        hls.loadSource('video_index.m3u8');
31
        hls.attachMedia(video);
32

33
    });
34
    </script>
35
</body>
36
</html>

就是这么简单!