做网站的时候，视频和音频这两个需求几乎躲不掉。课程站要放录播，作品集要放宣传片，博客里想插一段背景音乐，直播回放还得能拖动进度条。原生 video 标签确实能用，但那个控件长得实在劝退，用户一看就觉得这站不专业。这次整理了 4 款开源免费、能商用的播放器库，都是拿来即用的，换上之后播放器的观感和功能能直接上一个台阶。
四款库分别适合什么场景
Video.js 是最成熟的一款，企业项目用得多，皮肤、字幕、播放列表、快捷键都能扩展，官方还自带主题样式，适合要长期维护的视频站。Plyr 最大的优点是好用又好看，原生控件、倍速播放、画中画、音量记忆都做好了，代码量还少，个人站和作品集用它性价比最高。hls.js 专门解决流媒体播放，视频源是 m3u8 格式的直播或者分片点播时，浏览器原生支持不好的地方全靠它接管。Howler.js 管音频，页面里的音效、背景音乐、小游戏的音效，用它最省心，移动端自动播放的兼容问题它也会帮你处理掉。
怎么用，多久能上手
这几个库的学习成本都很低。视频类的引入方式基本就是引库加上改个 class，把原来 video 标签的 class 换成播放器指定的名字，控件就自动变成新的了。要注意 Plyr 还得额外引一段 CSS，不然只有功能没有样式。音频类更简单，调一个方法传音频地址就能播。如果你的视频源是普通 mp4，直接用 Video.js 或者 Plyr 就行；如果是直播流或者 m3u8，就把 hls.js 挂上去，浏览器不支持 HLS 时它会自动接管播放。
包里都有什么
压缩包按库名分成了四个目录，每个目录里放的是压缩后的正式文件，直接引到页面就能用，不需要你去跑构建或者装依赖。视频类的库附带了 CSS 主题文件，音频类的带上核心文件，两者互不影响。另外还配了一份说明文档，写清楚了每个库的引入方式、基础配置和常见用法，拿到手照着看就行。文件都不大，四个库加起来也就几百 KB，对网站加载速度基本没有影响，手机端打开也不会拖慢首屏。
这类前端库属于用一次省一堆事的资源。自己从零写一个播放器，光是各种浏览器的兼容性就够折腾好几天，还不一定做得好看。这包整理好之后，你只要会复制粘贴就能用起来，改主题、换样式也就是改几行配置的事，不需要重写播放逻辑。后续还会继续整理类似的前端工具合集，需要的可以先收藏这篇，有具体问题也可以留言，我看到会回。
暂无评论内容