西瓜播放器是字节跳动推出的一款播放器。
下面是字节跳动关于xgplayer的说明。

字节跳动的视频业务大多数是短视频，早期的时候我们在 video.js 基础上做二次开发。后来发现很多功能达不到我们的要求，比如自定义UI的成本、视频的清晰度无缝切换、视频流量的节省。考虑到当前点播依旧是mp4居多，我们做了个大胆的假设：在播放器端加载视频、解析视频、转换格式，让不支持分段播放的mp4动态支持，这样就无须转换源视频的格式，服务器端也无其他开销。在这个动力下，我们在2017年年底完成了这项开发任务，并与2018年年初测试了稳定性和经济收益。

在这个背景下，我们一次解析了 hls、flv 等视频，这样我们不再简单的依赖第三方的视频库，只有掌握了底层技术才有优化的可能性。在不断攻克 hls、flv 解析的背景下，我们增强了产品体验，比如交互效果、进场动画等。直到最近，我们想完善文档并把播放器源代码开源出来给更多的视频从业者一个参考，我们一起交流学习，共同进步。

下面说下如何在网页中集成这款播放器

1: 首先要引入xgplayer的js文件

<scriptsrc="https://cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script>

这块要注意下如果写成 //cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js ，可能会有些问题，如果是https的网站没什么问题，但是要是http的网站就不好了，可能是js站点强制了https,导致产生了302 ,会造成页面的js加载失败。

2: 页面放置容器标签

<div id="xgplayer_div"></div>

3: 页面初始化xgplayer

<script>
    let player = new Player({
        id: 'xgplayer_div',
        url: 'http://dede.linglujun.com/uploads/media/方形摇摆筛.mp4',
        fitVideoSize: 'auto',
        autoplay: true,
        volume: 0.6,
        loop: true,
        videoInit: true,
        controls:false,
        //fluid: true,
        disableProgress: false,
    });
</script>

初始化xgplayer的参数有很多，
主要有
autoplay:true 是否自动播放 ，自动播放在chrome下需要先进行设置 否则会造成此功能被拦截，chrome默认不允许视频自动播放
volume:0.6  初始声音大小设置 0~1
loop: true  是否循环播放
poster: ‘//abc.com/**/*.png’  封面设置 
videoInit: true 初始化显示视频首帧

还有更多的设置项，请参考官方文档：官方文档
github
xgplayer-vue