字节开源,一款web端的好用又好看的音乐、视频播放器-XGPlayer
前言
视频播放器一直是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/[email protected]/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
来源: FreeClashNode
文章版权归作者所有,未经允许请勿转载。
免费节点实时更新
热门文章
- 【金玉满堂】2月7日|22.2M/S,V2ray/SSR/Clash(小猫咪)免费节点订阅链接每天更新
- 【心想事成】2月6日|20.1M/S,V2ray/SSR/Clash(小猫咪)免费节点订阅链接每天更新
- 【福纳八方】2月5日|22.7M/S,Clash(小猫咪)/V2ray/Shadowrocket(小火箭)免费节点订阅链接每天更新
- 【万象更新】2月11日|22.8M/S,Clash(小猫咪)/V2ray/SSR免费节点订阅链接每天更新
- 【大吉大利】2月1日|21.4M/S,Shadowrocket(小火箭)/Clash(小猫咪)/V2ray免费节点订阅链接每天更新
- 【蒸蒸日上】2月8日|22.2M/S,V2ray/Clash(小猫咪)/SSR免费节点订阅链接每天更新
- 【欢聚一堂】2月10日|21.9M/S,Shadowrocket(小火箭)/V2ray/Clash(小猫咪)免费节点订阅链接每天更新
- 【六畜兴旺】2月9日|18.9M/S,Clash(小猫咪)/SSR/V2ray免费节点订阅链接每天更新
- 【大富大贵】2月12日|23M/S,Clash(小猫咪)/SSR/V2ray免费节点订阅链接每天更新
- 1月26日|22.8M/S,SSR/V2ray/Clash(小猫咪)免费节点订阅链接每天更新
最新文章
- 2月20日|20.9M/S,SSR/Clash(小猫咪)/V2ray免费节点订阅链接每天更新
- 2月19日|22.2M/S,SSR/Clash(小猫咪)/V2ray免费节点订阅链接每天更新
- 2月18日|18.5M/S,V2ray/Clash(小猫咪)/Shadowrocket(小火箭)免费节点订阅链接每天更新
- 2月17日|21.8M/S,SSR/Clash(小猫咪)/V2ray免费节点订阅链接每天更新
- 2月16日|22.5M/S,V2ray/Clash(小猫咪)/SSR免费节点订阅链接每天更新
- 2月15日|18.5M/S,Clash(小猫咪)/Shadowrocket(小火箭)/V2ray免费节点订阅链接每天更新
- 2月14日|20.9M/S,V2ray/Shadowrocket(小火箭)/Clash(小猫咪)免费节点订阅链接每天更新
- 2月13日|18.6M/S,V2ray/Clash(小猫咪)/SSR免费节点订阅链接每天更新
- 【大富大贵】2月12日|23M/S,Clash(小猫咪)/SSR/V2ray免费节点订阅链接每天更新
- 【万象更新】2月11日|22.8M/S,Clash(小猫咪)/V2ray/SSR免费节点订阅链接每天更新