百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

西瓜播放器 - 字节跳动出品的开源 H5 视频组件,带解析器、节省流量

zhezhongyun 2025-03-04 15:50 40 浏览

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

关于西瓜播放器

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

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

技术特性

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

开发上手体验和使用建议

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

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

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

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

音频播放支持

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

浏览器兼容

在兼容性方面,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 放置在官网展示。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

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

相关推荐

轻松玩转windows控制台(五):彻底搞懂屏幕缓冲区

写在前面在上一篇文章中,详细地介绍了控制台程序最容易令人困惑和混淆的地方,即什么是控制台窗口,什么是控制台屏幕缓冲区。并通过几个示例程序,演示了如何设置控制台窗口“显示区域”的大小。(轻松玩转wind...

零基础教你学前端——85、高度自适应

这节课,我们学习如何让元素的宽度和高度在容器里自适应。什么是宽高自适应呢?页面里有两个div,开始的时候宽度都是800px,当我们将浏览器窗口的宽度拖动到小于800px的时候,我们发现:上面的...

Grafana可视化平台面板之Gauge仪表和Bar Gauge条形仪表

仪表(Gauge)仪表是一种用于展示单个数值指标并跟踪其随时间变化的图表类型。它通常用于显示系统的实时状态或关键性能指标,如CPU使用率、内存占用率等。仪表通过一个圆形或半圆形的表盘来展示数值,并可以...

网页五指棋游戏(五指棋单机)

完整代码如下,大家可以保存到html文件点击打开,就可以看到如上效果<!DOCTYPEhtml><htmllang="zh-CN"><head>...

2020年度中央机关公开遴选和公开选调公务员报名即将开始

新华社北京10月27日电(记者林晖)记者27日从国家公务员局获悉,2020年度中央机关公开遴选和公开选调公务员报名即将开始,考生可于10月28日8时至11月6日18时期间,登录“2020年度中央机关公...

小程序学习日志7:可滚动的视图区域组件(滚动条)

导读经过这段日子的学习,大家对小程序的了解多了多少呢?我们这段时间学了很多组件的用法,以及这些组件的属性和属性的合法值,图片、文字、块,还了解了不少的样式代码和小程序的基本知识。我们今天来讲一个可滚动...

四叶草SEO:主要SEO作弊方法之隐藏文字

石家庄四叶草SEO小编在这里介绍黑帽,并不意味鼓励大家使用黑帽,恰恰相反,而是因为很多SEOer无意之中就使用了黑帽手法,自己却不知道。对于一个正常的商业网站和大部分个人网站来说,做好内容,正常优化,...

鸿蒙仓颉语言开发实战教程:商城搜索页

大家好,今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多,都有点密集恐惧症了,不过我们可以从上至下将它拆分开来,逐一击破。导航栏搜索页的的最顶部是导航栏,由返回按钮和搜索框两部分组成,比较简...

鸿蒙Next仓颉语言开发实战教程:设置页面

仓颉语言商城应用的页面开发教程接近尾声了,今天要分享的是设置页面:导航栏还是老样式,介绍过很多次了,今天不再赘述。这个页面的内容主要还是介绍List容器的使用。可以看出列表内容分为三组,所以我们要用到...

CSS box-sizing 属性详解(css中box属性有哪些)

box-sizing是CSS的一个非常重要的属性。CSS的box-sizing属性用于控制元素尺寸的计算方式,决定了元素的宽度(width)和高度(height)是否包含内边距(...

68.C# MenuStrip控件(c#基本控件)

摘要MenuStrip控件是在.NETFramework版本2.0中引入的。可以通过MenuStrip控件,轻松创建像MicrosoftOffice中的菜单。MenuStrip...

Qt使用布局管理器实现扩展对话框(qt选择文件路径对话框)

今天跟大家讲讲扩展对话框的实现;扩展对话框效果如下所示:(1)初始界面:(2)单击<More>按钮:(3)再次单击<More>按钮:这节主要讲解用布局管理器方式实现,下节讲解用...

探讨小程序开发的布局(小程序开发部署流程)

谈到小程序布局就不得不谈WXSS(WeiXinStyleSheets)!WXSS是微信小程序专用的样式语言。WXSS与css虽然在尺寸单位和样式导入不同,但是,具有CSS大部分特性。小程序的样式...

图片懒加载的现代 JavaScript 实现,仅需 10 行代码

过去,实现懒加载通常需要监听scroll事件,并结合getBoundingClientRect()等方法计算元素位置,代码不仅繁琐,而且频繁的计算会引发性能问题。现代浏览器提供了Inters...

JS实现轮播图案例(一看就懂,逻辑清晰)

1.功能分析实现如图所示的轮播图,要实现的功能主要有:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。点击右侧按钮一次,图片下滑一张;点击左侧按钮,图片上滑一张。图片播放的同时,下面小圆圈模块跟...