English | 简体中文
xgplayer is a web video and audio player library, designed with separate, detachable UI components. Since everything is componentized. the UI layer is very flexable.
xgplayer is bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence.
For mp4 that does not support streaming, you can use staged loading. This means load control, seamless switching without artifacts, and video bandwidth savings. It also integrates on-demand and live support for FLV, HLS, and dash.
For more details, please read the Documentation.
-
Install
$ npm install xgplayer
-
Usage
Step 1:
<div id="vs"></div>
Step 2:
import Player from 'xgplayer'; const player = new Player({ id: 'vs', url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4' })
This is the easiest way to configure the video player. For more advanced content, see the plug-in section or documentation. more config
xgplayer provides more plugins. Plugins are divided into two categories: one is self-starting, and another inherits the player's core class named xgplayer. In principle, the officially provided plug-ins are self-starting and the packaged third-party libraries are inherited. Some feature plug-ins themselves can provide a downgrade scenario that suggests a self-start approach, or an inheritance approach if not. The player supports custom plugins for more content viewing plugins
The following is how to use a self-starting plug-in:
import Player from 'xgplayer'; import 'xgplayer-mp4'; const player = new Player({ id: 'video', url: '//abc.com/test.mp4' })
xgplayer-mp4
plugin is self-starting, It loads mp4 video itself, parses mp4 format, implements custom loading, buffering, seamless switching, and so on. it will automatically downgrade devices that do not support MSE. detailsFor debugging, we provide example video files in github. You can clone the whole git repository, which includes both code and example videos with 'git clone --recurse-submodules -j8'. With 'git clone' you will pull only xgplayer code and its plugins.
$ git clone --recurse-submodules -j8 [email protected]:bytedance/xgplayer.git # OR git clone [email protected]:bytedance/xgplayer.git $ cd xgplayer $ npm install $ npm run dev
Then visit http://localhost:9090/examples/index.html
Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms.
- Xgplayer is licensed under the MIT License. You comply with its obligations by default.
- By default, you authorize us to place your logo in xgplayer website, which using xgplayer. If you have any problem, please let us know.
We welcome anyone with an interest in web media technology to join! Please contact us at [email protected]
xgplayer's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.