xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量_第1张图片

一个功能强大,符合国内视频播放业务的 web 视频播放组件,由西瓜视频技术团队官方出品。

关于西瓜播放器

西瓜播放器 (xgplayer.js) 不是一个看片软件,而是一个 Web 开发上的视频播放器类库,也是一个独立的 UI 组件,用来实现在网页上播放视频的功能。不仅在 UI 层有灵活的表现,同时也集成了对 flv、hls、dash 的点播和直播支持,尤其是在 mp4 点播上很便捷,让本来不支持流播放的 mp4 格式视频能够分段加载,无须转换格式实现清晰度无缝切换、加载控制、节省视频流量的需求,节省服务器开销。

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量_第2张图片

字节跳动的视频业务大多数是短视频,早期的时候开发团队在 video.js 基础上做二次开发。后来发现很多功能达不到要求,比如自定义 UI 、视频的清晰度无缝切换、视频流量开销大等,决定自己从底层开发一款符合业务要求的 web 播放器,在 2018 年初推出了稳定版本,发展至今,功能强大,性能出色,拥有完善的视频播放 API,不仅支撑了西瓜视频、抖音、头条等 web 视频业务,也被国内多家大厂超过200个产品用来支持视频业务,是一款优秀的 HTML5 视频播放器。

技术特性

  • 从底层解析 MP4、HLS、FLV 格式的视频,有更广的视频播放使用场景
  • 灵活的插件体系,PC / 移动端自动切换安全的白名单机制
  • 强大的 MP4 视频播放控制,点播无缝切换,带宽节省显著
  • 拥有完整的产品机制,错误的监控上报和自动的降级处理

开发上手体验和使用建议

xgplayer.js 的安装使用很简单,支持 npm 安装和 cdn 引入 js 两种方式,使用也很简单,只需要提供占位 DOM,即可实例化,官网提供了全面易懂的开发文档和代码例子。

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量_第3张图片

xgplayer.js 对 web 视频播放功能支持很全面,连 ios 投屏、微信同层播放、微信全屏播放等视频开发中比较难解决的功能,都可以简单配置实现,官方还提供了各种视频播放相关的插件,目测遇到的视频相关开发需求,几乎都能帮我们解决。

对于可能只会用到很小一部分功能,xgplayer.js 提供了简易版本和只引入播放内核两种方式,能够大大减少打包体积。

为了提高开发效率和开发体验,官网还提供了可视化的代码生成器。

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量_第4张图片

xgplayer.js 还可以用来播放音频,简单配置就可以做出一个带可视化波形、歌词同步的音乐播放器。

xgplayer.js 西瓜播放器 - 字节跳动团队出品的免费开源 HTML5 视频播放组件,内置解析器、也能节省流量_第5张图片

在兼容性方面,xgplayer.js 支持直接播放 MP4 视频:

  • PC 端播放HLS、FLV、MPEG-DASH需要浏览器支持 Media Source Extensions
  • iOS 支持直接播放 mp4 和 HLS
  • 安卓支持直接播放 mp4 和 HLS,播放FLV、MPEG-DASH 需要浏览器支持 Media Source Extensions

免费开源说明

西瓜播放器 (xgplayer.js) 是字节跳动开发团队出品的免费开源 HTML5 音视频播放组件,基于 MIT 开源协议,任何个人和公司都可以免费用于自己的项目,唯一的要求就是默认授权将使用西瓜播放器所在业务的 Logo 放置在官网展示。

原文链接:https://www.thosefree.com/xgplayer-js

你可能感兴趣的:(前端优秀开源项目,前端,ui,视频)