西瓜播放器

Web 视频播放器类库
授权协议 MIT
开发语言 JavaScript
所属分类 Web应用开发、 Web多媒体播放器
软件类型 开源软件
地区 国产
投 递 者 齐航
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

概述

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

  • 1、安装依赖 cnpm install xgplayer --save cnpm install xgplayer-flv--save cnpm install xgplayer-hls.js--save 2、引入依赖  import HlsJsPlayer from "xgplayer-hls.js";  import FlvPlayer from "xgplayer-flv"; 3、使用 da

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

  • 前言: 用西瓜播放器xgplayer做rtsp直播流的播放,想要在页面加载时自动播放。 设置autoplay:ture,muted:ture,嘿没有成功! 在网上找了半天,设置手动触发play.play(),修改参数,都没有用. 最后在某个网友的评论里面找到了怎么设置自动播放,当场惊呼太强了。 一是因为文档里面完全没有这个属性, 二是因为找了半天网友都没有说怎么设置自动播放, 三是为什么别的播放插

  • <template> <div class="pc-live"> <div class="left"> <!-- 开启声音 --> <div class="sound" @click.stop="openSound" v-if="sound"> <img src="./../assets/live-jingyin.png" alt="" />

  • 安装 npm install xgplayer --save npm install --save xgplayer-flv.js 引入 import FlvJsPlayer from 'xgplayer-flv.js'; import Player from 'xgplayer'; 使用 <div class="video" v-show="isPlay" :id="camDOMi

  • npm安装: npm install xgplayer 线上引用地址: <script src="//cdn.jsdelivr.net/npm/xgplayer@2.9.6/browser/index.js" type="text/javascript"></script> 1).mp4点播 <div id="video"></div> let player = new Player({

 相关资料
  • 我正在开发一个音频播放器,它可以在后台播放音频文件。我的问题是,当录像机或视频播放器启动时,我需要暂停音频播放器。 有什么方法可以处理这个任务吗?例如,我有来处理这些调用。当我接到呼叫或wnat呼叫时,我们可以使用呼叫状态暂停播放器。我想为录像机或视频播放器以及相同的场景。当视频/录制开始时,我需要暂停音频播放器。

  • 我正在开发一个应用程序,它使用webview来显示网页,如果url是视频链接(youtube)或作为网页一部分的视频,我想播放视频。我试着把url直接添加到webview中,但它连youtube链接都不播放,我已经在webview中启用了插件和javascript.....有谁能在这个问题上帮我,

  • 我想玩。iPhone应用程序中的mpd文件,为此我尝试了VLC播放器,但它没有按照预期工作,播放视频花费了太多时间。我还有其他选择吗。像Android中的exoplayer这样的mpd文件。 我已经为此目的实现了VLC媒体播放器,但现在我正在寻找另一种选择。如果有人对此有任何想法,请帮助。

  • 大家好,我正在尝试使用两个独立的媒体播放器实例播放音频和视频文件。当我从一开始播放它时,它工作得很好。但当我寻找时,我可以看到音频和视频的延迟 这是我寻找音频和视频的代码 //sikAudio(msec); if(media播放器!=null) { // 没有直播流,如果(medialayer.get持续时间() }

  • 我正在开发一个包含一些音频播放器的RecyclerView的应用程序。应用程序将下载。3gp文件(如果尚未下载)。 当我单击playAudio按钮时,音频未被播放。 这是我的适配器代码: 我怎样才能解决这个问题?

  • 视频直播App播放器优化 Android 设置 IOS 设置