Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/openplayerjs/openplayerjs
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
https://github.com/openplayerjs/openplayerjs
audio dash hls html5 html5-audio html5-video html5-video-player javascript openplayerjs player typescript vast video
Last synced: 3 months ago
JSON representation
Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads
- Host: GitHub
- URL: https://github.com/openplayerjs/openplayerjs
- Owner: openplayerjs
- License: mit
- Created: 2018-09-03T17:41:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-01T02:26:08.000Z (4 months ago)
- Last Synced: 2024-11-01T03:21:22.677Z (4 months ago)
- Topics: audio, dash, hls, html5, html5-audio, html5-video, html5-video-player, javascript, openplayerjs, player, typescript, vast, video
- Language: TypeScript
- Homepage: https://www.openplayerjs.com
- Size: 16.6 MB
- Stars: 580
- Watchers: 12
- Forks: 86
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-video - openplayerjs - Lightweight HTML5 video/audio player with smooth controls and ability to play VAST/VPAID/VMAP ads. (Players)
README
# [OpenPlayer.js](https://www.openplayerjs.com)
[](https://coveralls.io/github/openplayerjs/openplayerjs?branch=master)
[](https://www.jsdelivr.com/package/npm/openplayerjs)
[](https://circleci.com/gh/openplayerjs/openplayerjs/tree/master)
This is a media player that uses all the goods of HTML5 video/audio elements to play the most popular media in MP4/MP3, HLS and M(PEG)-DASH, and also has the ability to play VMAP, VAST and VPAID ads.
## 🚨 IMPORTANT 🚨
### 🔧 This repository is in maintenance at this point. 🔧
No new features or additions will be added, only bug fixes.
## Advantages
- Supports **all modern browsers**.
- **No dependencies**, since it is written in Typescript.
- Runs a simple but yet powerful algorithm to **check the browser's autoplay capabilities** across browsers.
- **Enhance your player** adding your own buttons. Check [here](./docs/customize.md) for more details.
- Provides the ability to use a **single VAST/VPAID** source or a **VAST/VPAID playlist** from several different sources (including URLs and valid XML strings).
- **Can play ads in infinite loop**, desired for ads that are in a heavy text page.
- Always **responsive** by default, for both video/audio tags; for video, **`fill`** and **`fit`** modes are available to either scale and crop media relative to its parent container, or to attempt to make the media fit its parent container (including black bars), respectively.
## Projects using OpenPlayerJS
| | | |
| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](https://www.medscape.org/simulation) | [](https://player.arrow.nl/ad.html) | [](https://chichester.moderngov.co.uk/ieListDocuments.aspx?CId=134&MId=1620) |
| [](https://live.video.tuwien.ac.at/room/heart0/player.html) | [](https://www.clippa.tv/bigKnightOut) | [](https://radiocenter.si) |
| [](https://rockradio.si) | | |
## Migrating from older version to new ones
To learn more details about how to migrate from 1.x.x version to 2.x.x, or any breaking changes in newer versions, visit the [Migration document](./migration.md).
## Getting Started
The standard template to start using OpenPlayerJS is show in the following snippet.
```html
// Check the `API and events` link below for more options
const player = new OpenPlayerJS('player');
player.init();
```
## Usage and API Guides
If you want to unleash the power of OpenPlayerJS, learn more about OpenPlayerJS by checking the following links.
- [How to use OpenPlayerJS](./docs/usage.md)
- [HTML](./docs/usage.md#html)
- [Javascript](./docs/usage.md#javascript)
- [About the `levels` control](./docs/usage.md#about-the-levels-control)
- [About the usage of third-party libraries](./docs/usage.md#about-the-usage-of-third-party-libraries)
- [React/Next.js](./docs/usage.md#reactnextjs)
- [API and events](./docs/api.md)
- [API](./docs/api.md#api)
- [Events](./docs/api.md#events)
- [Keyboard Shortcuts](./docs/api.md#keyboard-shortcuts)
- [NEW! Player Customizations](./docs/customize.md)
- [Modify Look](./docs/customize.md#modify-look)
- [Add Control](./docs/customize.md#add-control)
- [Add External Player API](./docs/customize.md#add-external-player-api)
## Code Samples
If you need a reference on how to use OpenPlayerJS in some of the most common scenarios, check the following links:
### Beginners
- [No configuration (only DOM classes)](https://codepen.io/rafa8626/pen/WaNxNB)
- [Minimal configuration](https://codepen.io/rafa8626/pen/BqazxX)
- [Using `fill` mode](https://codepen.io/rafa8626/pen/xxZXQoO)
- [Using `fit` mode](https://codepen.io/rafa8626/pen/abmboKV)
- [Using Ads (linear and non-linear samples)](https://codepen.io/rafa8626/pen/vVYKav)
- [Removing controls and using `preload="none"`](https://codepen.io/rafa8626/pen/OJyMwxX)
- [Using `Levels` and setting width/height](https://codepen.io/rafa8626/pen/ExxXvZx)
- [Use FLV source (only modern browsers and Android, not iOS)](https://codepen.io/rafa8626/pen/QWEZPaZ)
- [OpenPlayerJS with React](https://codepen.io/rafa8626/pen/GRrVLMB)
- [OpenPlayerJS with Next.js](https://codesandbox.io/s/vigorous-almeida-71gln)
- [OpenPlayerJS with Vue.js](https://codepen.io/rafa8626/pen/JjWPLeo)
- [YouTube video (using plugin)](https://codepen.io/rafa8626/pen/wvvOYpg)
- [Using hls.js p2p plugin](https://codepen.io/rafa8626/pen/PoPLMxo)
### Intermediate
- [Add source after initialization](https://codepen.io/rafa8626/pen/YzzgJrK)
- [Playing HLS streaming with DRM (Encryption)](https://codepen.io/rafa8626/pen/QZWEVy)
- [M(PEG)-DASH with Ads](https://codepen.io/rafa8626/pen/Xxjmra)
- [Ads playlist (multiple URLs)](https://codepen.io/rafa8626/pen/wvvxbMN)
- [Add a custom element (watermark)](https://codepen.io/rafa8626/pen/JjLQNjo)
### Advanced
- [Updating source and Ads for dynamic content loading](https://codepen.io/rafa8626/pen/gORJWVz)
- [Updating Ads and clickable Ad element](https://codepen.io/rafa8626/pen/OJmEzXw)
- [Trigger Ad manually](https://codepen.io/rafa8626/pen/abZNgoY)
- [Fully customized audio player](https://codepen.io/rafa8626/pen/ExPLVRE)
- [Basic playlist (video and audio)](https://codepen.io/rafa8626/pen/GRREQpX)
- [Retrieve data from audio streaming (HLS)](https://codepen.io/rafa8626/pen/abbjrBW)
- [Seamless transitions between media using custom control](https://codepen.io/rafa8626/pen/oNXmEza)
## Built With
- [Typescript](https://www.typescriptlang.org/docs/home.html) - The Javascript for Pros.
## Authors
- **Rafael Miranda** - [rafa8626](https://github.com/rafa8626)
See also the list of [contributors](https://github.com/openplayerjs/openplayerjs/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.