西瓜播放器 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
西瓜播放器 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
西瓜播放器 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
西瓜播放器 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
西瓜播放器 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

概述

西瓜播放器是一个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

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (16)

加载中
缺少播放记录
2020/12/01 11:58
回复
举报
先收藏
2020/06/30 13:18
回复
举报
西瓜播放器可以统计播放时长吗
2020/02/26 21:22
回复
举报
找到解决方案了吗?
2020/03/26 18:28
回复
举报
去掉播放进度条,然后让用户观看记录,记录观看视频的时间
2020/05/14 09:59
回复
举报
是用轮询的方案吗?定期去调后端的接口,统计当前的播放时长?
2020/09/18 10:36
回复
举报
打分: 力荐
H5播放器,省流量,支持mp4、hls、flv、dash多种格式的点播直播
2018/08/27 15:14
回复
举报
打分: 力荐
支持视频、音频,mp4可以分段加载做到流量控制,很强大
2018/08/27 14:56
回复
举报
localhost:9090??? (黑人问号)
2018/08/27 10:33
回复
举报
最后一个地址是什么鬼?(黑人问号)
2018/08/27 08:42
回复
举报
打分: 推荐
好熟悉的名字!!!
2018/08/26 21:40
回复
举报
打分: 推荐
可以的!
2018/08/26 21:01
回复
举报
rtmp,hsl协议在原生的安卓,ios浏览器中能不能使用, 关注这点
2018/08/25 20:16
回复
举报
更多评论
暂无内容
2018/08/22 10:41

前端算法之弹幕设计

大家都说前端写页面较多,几乎用不到算法。本文愿从弹幕设计这个场景来描述算法在前端中的应用,我们先来看下实现效果: ![](https://oscimg.oschina.net/oscnet/e916c20f537cea77547c0a815fe02381dc3.jpg) 图1.1 弹幕效果 开场之前我们先来描述弹幕开发的难度,再集中精力描述算法设计的思路。 * 如何保证不同字号的弹幕不碰撞 * 弹幕的位置计算 * 弹幕的速度控制及动画实现 * 弹幕与视频的同步 ***如何保证不同字号的弹幕不碰...

0
0
发表了博客
2019/10/10 16:49

vue移动端项目经验(二)

####视频插件vue-video-player的使用及注意事项 官方文档 video.js:https://docs.videojs.com/docs/api/player.html vue-video-player:https://github.com/surmon-china/vue-video-player 1、包的安装 npm install vue-video-player --save 2、包的引入 import VideoPlayer from 'vue-video-player' require('video.js/dist/video-js.css') //若此行报错无法找到,则改为require('vue-video-player/node_modules/video.js/d...

0
0
发表了博客
2018/07/02 15:48

用video标签流式加载

video标签 浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频。 这个过程是浏览器来加载video的。 这种方式有什么问题吗? mp4文件不能流式加载 webm,flv,hls等格式兼容性问题 播放器ui太丑,一些常用的功能都没有 清晰度切换,等一些操作需要重载视频,比较慢而且还会黑屏 无法对视频加密 请求video流视频 我们可以通过设置responseType为arraybuffer来获取视频流,也可以通过range字段...

0
0
发表了博客
2020/08/28 23:09

如何优雅的实现消息通信?

一、背景 作为一名 Web 开发者,在日常工作中,经常都会遇到消息通信的场景。比如实现组件间通信、实现插件间通信、实现不同的系统间通信。那么针对这些场景,我们应该怎么实现消息通信呢?本文阿宝哥将带大家一起来学习如何优雅的实现消息通信。 好的,接下来我们马上步入正题,这里阿宝哥以一个文章订阅的例子来拉开本文的序幕。小秦与小王是阿宝哥的两个好朋友,他们在阿宝哥的 “全栈修仙之路” 博客中发现了 TS 专题文章,...

0
0
2020/08/26 23:34

如何优雅的实现消息通信?

一、背景 作为一名 Web 开发者,在日常工作中,经常都会遇到消息通信的场景。比如实现组件间通信、实现插件间通信、实现不同的系统间通信。那么针对这些场景,我们应该怎么实现消息通信呢?本文阿宝哥将带大家一起来学习如何优雅的实现消息通信。 好的,接下来我们马上步入正题,这里阿宝哥以一个文章订阅的例子来拉开本文的序幕。小秦与小王是阿宝哥的两个好朋友,他们在阿宝哥的 “全栈修仙之路” 博客中发现了 TS 专题文章,...

0
0
2020/08/31 07:57

【Web技术】702- 如何优雅的实现消息通信?

一、背景 作为一名 Web 开发者,在日常工作中,经常都会遇到消息通信的场景。比如实现组件间通信、实现插件间通信、实现不同的系统间通信。那么针对这些场景,我们应该怎么实现消息通信呢?本文阿宝哥将带大家一起来学习如何优雅的实现消息通信。 好的,接下来我们马上步入正题,这里阿宝哥以一个文章订阅的例子来拉开本文的序幕。小秦与小王是阿宝哥的两个好朋友,他们在阿宝哥的 “全栈修仙之路” 博客中发现了 TS 专题文章,...

0
0
发表于程序人生专区
2019/04/27 22:11

《HelloGitHub》第 37 期

公告 欢迎熟悉 C# 热爱开源的小伙伴加入我们,点此联系我 《HelloGitHub》第 37 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等,这些开源项目大多都是非常容易上手,而且非常 Cool。主要是希望大家能动手用起来,加入...

0
0
发表了博客
2019/04/27 22:11

《HelloGitHub》第 37 期

公告 欢迎熟悉 C# 热爱开源的小伙伴加入我们,点此联系我 《HelloGitHub》第 37 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等,这些开源项目大多都是非常容易上手,而且非常 Cool。主要是希望大家能动手用起来,加入...

0
0
01/16 15:15

字节这款 Github 3400 星 Web 播放器是如何开发出来的?

在字节跳动,有这样一支技术团队: 他们开源的项目在GitHub摘得3400多颗星,除了字节跳动,不少其他互联网公司也在用他们的产品; 他们经历过不少极限操作,《囧妈》2020年春节期间网络首播的一套技术解决方案,他们在36小时内就完成了; 他们拥有交叉领域稀有技能,据说是「前端里最懂多媒体的,多媒体里最懂前端的」。 他们,就是字节跳动的web多媒体团队。 GitHub 3400星的前端开源播放器 Web多媒体团队的组建者郭辉2016年加...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
16 评论
105 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部