Web 视频播放器类库 西瓜播放器

Web 视频播放器类库 西瓜播放器

MIT
JavaScript
跨平台
2018-08-22
中传思客

概述

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

起步

  1. 安装

    $ npm install xgplayer

  2. 使用

  • Step 1:

    <div id="vs"></div>
  • Step 2:

    import Player from 'xgplayer'
    
    let player = new Player({
        id: 'vs',
        url: 'http://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 的设备自动降级。

Mobile Support

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

Dev

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

$ 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

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

的码云指数为
超过 的项目
加载中

评论(10)

kaiyuanzx
kaiyuanzx
H5播放器,省流量,支持mp4、hls、flv、dash多种格式的点播直播
中传思客
支持视频、音频,mp4可以分段加载做到流量控制,很强大
敲键听响
localhost:9090??? (黑人问号)
愤怒的小毛线
愤怒的小毛线
最后一个地址是什么鬼?(黑人问号)
陈小默
陈小默
好熟悉的名字!!!
c
chasonma
可以的!
开源中国123456789
开源中国123456789
rtmp,hsl协议在原生的安卓,ios浏览器中能不能使用, 关注这点
平原君
平原君
这个跟那个西瓜播放器有什么关系么
白石
白石
看着不错,先收藏!
开源中国首席小学生
开源中国首席小学生
自带P2P搜索吗

暂无资讯

暂无问答

前端算法之弹幕设计

大家都说前端写页面较多,几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用,我们先来看下实现效果: 图1.1 弹幕效果 开场之前我们先来描述弹幕开发的难度,再集中精力描述...

2018/08/22 10:41
19
0

没有更多内容

加载失败,请刷新页面

没有更多内容

返回顶部
顶部