IMPORTANT As we did the clean-up and consistency improvements, some changes in 2.0.0 version are incompatible with the earlier versions! Find the detailed changes and the information that helps you migrate your code from version 1.x.x to 2.0.0 here.
- Easy-to-use --- Quick bootstrap and super-flexible customization.
- Accessibility --- You may rely on the keyboard shortcuts to control the playback for the best accessibility in the open source.
- Reliable --- Uses HTML5 video and Media Source Extensions.
- Modern browsers support -- We support compatibility with the latest Safari, Chrom, Firefox, Edge, and IE11.
- Customizable -- Make simple changes like modify UI texts and progress bar colors or go mad and customize player core and modules behaviour.
- Flexible and efficient --- Supports both adaptive streaming and progressive download. When you provide the content in multiple formats as an array of source video URLs, playable considers the environment and identifies the most efficient source to play in the given circumstances. Read more in Video Sources Note: Adaptive streaming sources have higher priority than those with progressive download. Native browser support has higher priority than MSE-enabled playback.
- Extensible --- Supported formats: MP4, WebM, HLS, DASH. New formats support may be added via adapters, along with the new behaviour and UI/UX.
To install the stable version, use one of the following methods:
- via npm
$ npm install playable --save import Playable from 'playable';
- add a
<script src="https://email@example.com/dist/statics/playable.bundle.min.js"></script> <script> var Playable = window.Playable; </script>
- you can play with the demo here
For the reference of the configuration options, please, see the Configuration.
How to use
To use playable in your project, import it, configure the necessary parameters (e.g. width, height, UI texts), initialize the player and attach it to the parent element.
In the src parameter, provide a video URL or an array of alternative format URLs to play. The video player supports the following video formats:
DASH manifest. Read more about Video Source.
Call public methods of the player instanse to control its behaviour, look and feel, and the playback process.
Process the events triggered by video player.
Out-of-the-box, you can configure your player UI with:
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs