playable

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.

Quick links: Installation | Configuration | How to use | Customization

What's playable?

Playable is a JavaScript component for video playback:

• 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.

Installation

To install the stable version, use one of the following methods:

• via npm

$ npm install playable --save

import Playable from 'playable';

• add a <script> element

<script src="https://unpkg.com/playable@2.10.3/dist/statics/playable.bundle.min.js"></script>

<script>
  var Playable = window.Playable;
</script>

• you can play with the demo here

Configuration

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.

Sample:

<div id="content" />;

// javascript
import Playable from 'playable';

document.addEventListener('DOMContentLoaded', function() {
  // Define config object
  const config = {
    width: 700,
    height: 394,
    src: 'http://my-url/video.mp4',
  };

  // Create player instance
  const player = Playable.create(config);

  // Attach it to your DOM structure
  player.attachToElement(document.getElementById('content'));
});

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: MP4, WebM, HLS, DASH manifest. Read more about Video Source.

Integration

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.

Customization

Out-of-the-box, you can configure your player UI with:

• Progress bar color via theme configuration object
• UI texts via texts configuration object

Big thanks!

Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs