字节跳动旗下西瓜视频技术团队开源了 xgplayer.js HTML5视频播放器。有人会问 video.js、mediaElement.js 等视频播放器已经很强大了，我们为什么还要造轮子？我们就从以下几个方面来聊聊。
字节跳动的视频业务大多数是短视频，早期的时候我们在 video.js 基础上做二次开发。后来发现很多功能达不到我们的要求，比如自定义UI的成本、视频的清晰度无缝切换、视频流量的节省。考虑到当前点播依旧是mp4居多，我们做了个大胆的假设：在播放器端加载视频、解析视频、转换格式，让不支持分段播放的mp4动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。在这个动力下，我们在2017年年底完成了这项开发任务，并与2018年年初测试了稳定性和经济收益。
在这个背景下，我们一次解析了 hls、flv 等视频，这样我们不再简单的依赖第三方的视频库，只有掌握了底层技术才有优化的可能性。在不断攻克 hls、flv 解析的背景下，我们增强了产品体验，比如交互效果、进场动画等。直到最近，我们想完善文档并把播放器源代码开源出来给更多的视频从业者一个参考，我们一起交流学习，共同进步。
愿景
起步视频、布局多媒体，不断挑战一个又一个技术难题。
西瓜视频播放器主张一切设计都是插件，小到一个播放按钮大到一项直播功能支持。想更好的自定义播放器完成自己业务的契合，理解插件机制是非常重要的，播放器本身有很多内置插件，比如报错、loading、重播等，如果大家想自定义效果可以关闭内置插件，自己开发即可。
快速上手
只需三步：安装、DOM占位、实例化即可完成播放器的使用。
安装
# 最新稳定版
$ npm install xgplayer
对于已有项目也可以通过 CDN 引入，代码如下：
<script src="//cdn.jsdelivr.net/npm/xgplayer@2.31.2/browser/index.js" type="text/javascript"></script>
注意
生产环境使用时请在CDN地址中锁定版本，CDN使用方法参考 jsdelivr。
使用
1. 在页面提供占位 DOM
<div id="mse"></div>
2. 实例化
let player = new Player({
id: 'mse',
url: '//abc.com/**/*.mp4'
});
就两步完成最简单的视频播放（mp4点播），播放器提供了较丰富的配置选项，如自动播放、贴图、音量控制、内置控件关闭等等，更多配置参考 配置。
如果想完成直播的功能，播放器会自动识别直播或回放，更多内容请参考 示例 。
注意
播放器核心包和插件都使用 babel 编译到 ES5。
效果
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>xgplayer</title>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;}
body {display:flex;}
#mse {flex:auto;}
</style>
<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>
</head>
<body>
<div id="mse"></div>
<script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
let player=new Player({
id: 'mse',
autoplay: false,
volume: 0.3,
url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',
poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
height: window.innerHeight,
width: window.innerWidth
});
</script>
</body>
</html>基于 MIT 许可协议
留言