给你写一篇适合掘金风格的技术分享文章：
分享一个免费的 M3U8 在线播放工具
前言
作为开发者，经常会遇到需要测试 M3U8/HLS 视频流的场景。之前每次都要打开 VLC 或者写一段测试代码，挺麻烦的。
于是我做了一个在线工具：PlayM3U8 —— 粘贴地址就能播放，简单直接。
为什么做这个工具？
日常开发中经常遇到这些情况：
- 后端给了个 M3U8 地址，想快速验证能不能播
- 调试直播流，需要反复测试不同的源
- 临时看个 HLS 视频，不想装软件
- 手机上收到个 M3U8 链接，没有合适的 App 打开
市面上的工具要么功能太重，要么广告太多，要么还要注册登录。所以干脆自己撸一个。
功能介绍
核心功能
打开网站，粘贴 M3U8 地址，点播放，完事。
https://example.com/live/stream.m3u8
就这么简单，没有多余的步骤。
支持的格式
- ✅ 标准 M3U8（HLS）
- ✅ 多码率自适应流（Master Playlist）
- ✅ 直播流（Live）
- ✅ 点播流（VOD）
特点
- 纯前端实现：基于 HLS.js，视频解析和播放都在浏览器完成，不经过服务器
- 跨平台：电脑、手机、平板都能用，只要有浏览器
- 无需安装：打开网页就能用
- 免费无广告：没有套路
技术实现
简单说下技术栈：
Next.js 14 + TypeScript + Tailwind CSS + HLS.js
核心播放逻辑很简单，就是用 HLS.js 加载 M3U8：
import Hls from 'hls.js'
const video = document.querySelector('video')
const hls = new Hls()
hls.loadSource('https://example.com/stream.m3u8')
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
video.play()
})
HLS.js 会自动处理：
- M3U8 文件解析
- TS 分片下载
- 自适应码率切换
- 缓冲管理
对于原生支持 HLS 的浏览器（比如 Safari），直接用 video 标签就行：
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = m3u8Url
} else if (Hls.isSupported()) {
// 使用 HLS.js
}
使用场景
- 开发调试：快速验证视频流地址是否有效
- 看直播：IPTV、体育赛事等 M3U8 直播源
- 临时播放：收到个视频链接，不想装软件
- 学习研究：了解 HLS 协议的工作方式
在线体验
🔗 网址：playm3u8.org
打开就能用，欢迎体验。
如果觉得有用，欢迎收藏和分享～
最后
工具比较简单，主要解决「快速播放 M3U8」这一个痛点。
有问题或建议欢迎评论区交流 👇
