西瓜播放器 HTML5 视频播放器开源项目

我要开发同款
匿名用户2018年08月22日
123阅读
开发技术JavaScript
所属分类Web应用开发、Web多媒体播放器
授权协议MIT

作品详情

西瓜播放器是一个Web视频播放器类库,它本着一切都是组件化的原则设计了独立可拆卸的UI组件。更重要的是它不只是在UI层有灵活的表现,在功能上也做了大胆的尝试:摆脱视频加载、缓冲、格式支持对video的依赖。尤其是在mp4点播上做了较大的努力,让本不支持流式播放的mp4能做到分段加载,这就意味着可以做到清晰度无缝切换、加载控制、节省视频流量。同时,它也集成了对flv、hls、dash的点播和直播支持。文档

起步

安装

$ npm install xgplayer

使用

Step1:

<div id="vs"></div>

Step2:

import Player from 'xgplayer'let player = new Player({    id: 'vs',    url: 'https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4'})

这是最简单的播放器配置方法,基本功能可以跑起来,如果想使用高级功能参考插件一节或者文档。更多配置

插件

西瓜播放器提供了较多的插件,插件分两类:一部分是自启动的,一部分是继承播放器核心类xgplayer的。原则上官方提供插件都是自启动的,封装的第三方类库都是继承方式。有些功能插件本身能提供降级方案建议使用自启动方式,否则建议使用继承方式。播放器支持自定义插件,更多内容查看 插件

对于自启动的插件使用方法如下:

import Player from 'xgplayer'import 'xgplayer-mp4'let player = new Player({    id: 'video',    url: '//abc.com/test.mp4'})

xgplayer-mp4插件就是自启动的,它会自己加载mp4视频、解析mp4格式,实现自定义加载、缓冲、无缝切换等详情。对于不支持 MSE 的设备自动降级。

MobileSupport

西瓜播放器支持移动端,不过安卓设备品牌和系统众多,兼容性问题很多,播放器提供白名单机制保证在移动端完美的运行。白名单机制

Dev

为了方便开发者调试,我们提供了示例视频资源。示例文件较大,可使用gitclone--recurse-submodules-j8命令完整拉取源码和示例文件;如果你只对源码感兴趣可以使用gitclone命令仅拉取源码部分。

$ git clone --recurse-submodules -j8 git@github.com:bytedance/xgplayer.git # 或者:git clone git@github.com:bytedance/xgplayer.git$ cd xgplayer$ npm install$ npm run dev

 

访问 https://localhost:9090/examples/index.html

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论