字节开源，一款web端的好用又好看的音乐、视频播放器-XGPlayer

看看资讯 / 100+人浏览

注意：免费节点订阅链接已更新至 2026-11-9，点击查看详情

前言

视频播放器一直是Web端比较难整的功能，虽然已经有比较优秀的开源库。可以满足日常开发大部分的功能，但是在一些功能上还是不尽如人意。今天给大家介绍一款由西瓜团队开源的视频播放器。

官方的介绍如下：

字节跳动的视频业务大多数是短视频，早期的时候我们在 video.js 基础上做二次开发。后来发现很多功能达不到我们的要求，比如自定义UI的成本、视频的清晰度无缝切换、视频流量的节省。考虑到当前点播依旧是mp4居多，我们做了个大胆的假设：在播放器端加载视频、解析视频、转换格式，让不支持分段播放的mp4动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。在这个动力下，我们在2017年年底完成了这项开发任务，并与2018年年初测试了稳定性和经济收益。  在这个背景下，我们一次解析了 hls、flv 等视频，这样我们不再简单的依赖第三方的视频库，只有掌握了底层技术才有优化的可能性。在不断攻克 hls、flv 解析的背景下，我们增强了产品体验，比如交互效果、进场动画等。直到最近，我们想完善文档并把播放器源代码开源出来给更多的视频从业者一个参考，我们一起交流学习，共同进步。

官网地址

官网地址： https://v2.h5player.bytedance.com/ github地址： https://github.com/bytedance/xgplayer

特性

支持格式：MP4、HLS、FLV
易拓展：灵活的插件体系、PC\移动端自动切换、安全的白名单机制
更丰富：强大的MP4控制、点播的无缝切换、有效的带宽节省
较完整：完整的产品机制、错误的监控上报、自动的降级处理
200+产品都在使用：百度、网易、移动等

快速上手

安装

# npm 方式 npm install xgplayer # cdn 方式 <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

在页面提供占位 DOM

<div id="mse"></div>

实例化

let player = new Player({   id: 'mse',   url: '//abc.com/**/*.mp4' });

就两步完成最简单的视频播放（mp4点播），播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置参考

运行效果

丰富的配置

选择器

视频源
尺寸
流式布局
自适应视频内容宽高
音量调节
封面图
倍速调节
预览、全屏
弹幕
画中画
截图
……

还有好多，具体的可以去官网查看相关的配置

丰富的插件和api

具体的内容太多了，如果有需要的可以去官网查看相关的配置。

音乐播放器

竟然还支持音乐播放……这个功能就有点太 nb 了

总结

官网还有很多实用的在线工具和示例Demo。大家可以去官网查看，总之一定会有你想不到的配置和功能。这里因为篇幅的原因没有都列举出来，大家一定要去官网查看~~

关注我，分享最实用的开发工具，提高工作效率，拒绝加班~~

作者: FreeClashNode

链接: https://www.freeclashnode.com/news/article-2957.htm

来源: www.freeclashnode.com

文章版权归作者所有，未经允许请勿转载。

上一个：「每日背一句Day 85」The man who has made up his mind to win

下一个：系统设计、体系结构设计、用户界面设计、数据库设计、模块设计书

免费节点实时更新

字节开源，一款web端的好用又好看的音乐、视频播放器-XGPlayer

前言

官网地址

特性

快速上手

丰富的配置

丰富的插件和api

音乐播放器

总结

热门文章

最新文章

归档

标签

字节开源，一款web端的好用又好看的音乐、视频播放器-XGPlayer

前言

官网地址

特性

快速上手

丰富的配置

丰富的插件和api

音乐播放器

总结

特别推荐

热门文章

最新文章

归档

标签