The browser world is highly fragmented, and browser vendors all have their own preferences and priorities regarding video encoding standards and adaptive streaming methods. This results in a lack of compatiblity between browsers, with each browser supporting some methods while providing no support for other methods.
vidi makes it easy dealing with otherwise complex
<video> playback scenarios.
<video>events so that callbacks receive relevant information per the event type.
vidi is currently only available via npm. At the root folder of the project run:
npm install vidi --save
We begin by importing vidi into our module, and initializing it.
If you're using ES6:
const Vidi = Vidi;
Then get the
<video> element from the document, and create a Vidi instance:
// Assuming there is a <video> element in the document with id 'my-video-element'.;// Create a new Vidi instance, providing it the <video> element;
Set the source of the video stream:
vidi.src = '';
The type of stream is automatically detected from the URL. The following extensions are recognized:
.m3u8 (HLS manifest), and
.mpd (DASH manifest).
If the URL does not end with the file extension, the type can be specified explicitly:
<video> and a
src are provided, we have a working HTML5 media playback of all the supported source formats.
Multiple sources (of different formats) can be provided as an array:
Types can still be specified explicitly (for all or some of the sources):
vidi assumes the URLs point to different formats of the same video, and will automatically detect and choose the ideal format for the current browser.
The order of sources in the array doesn't matter. The logic uses the following prioritization system to pick the most suitable format (from highest priority to lowest):
The algorithm bases decisions using browser feature detection.
vidi provides an easy to use event system. Listeners (callbacks) receive relevant data, per event type, as parameters of the call.
It also normalizes several "status" changing native events
(play, playing, pause, seeking, seeked, and ended)
into a single
The following events can be listened to:
|durationchange||Duration (in milliseconds)|
|timeupdate||Current time (in milliseconds)|
|ratechange||Playback rate (0 to 1, where 1 is full-speed, 0.5 is half-speed, etc)|
|volumechange||An object containing
|error||See Error Handling section below.|
The main Vidi class extends EventEmitter3, so any method from that implementation can be used on the created instances.
For example, subscribing to events can be done using the
To unsubscribe a listener:
Work in progress!
vidi aligns the different error codes in each possible playback flow into a single system.
Error codes are available on the main Vidi class:
Vidi.Errors.SRC_LOAD_ERROR // for src load failures in all flows// More to come soon...
Listening for errors is done just like other events:
vidi normalizes the different APIs of each library into a single coherent interface, while also allowing for basic customization.
Initially preferred bitrate for adaptive sources can be configured
per Vidi instance, via the
vidi.setInitialBitrate3000; // 3000kbpsvidi.src = '...';
Work in progress!
vidi exposes two events which fire when a new adaptive source is played.
levels event provides an array of
MediaLevels, each representing
a sub-streams in the adaptive source.
In addition, the
currentLevel event is fired when playback switches to a new level:
Work in progress!
When two or more sources point to the same format,
they are treated as different
MediaLevels instead of separate sources.
Same API as adaptive sources.
The project is set up using the following tools: TypeScript, npm, webpack, mocha, and chai.
To get dev mode running, use the following commands:
git clone firstname.lastname@example.org:wix/vidi.gitcd vidinpm installnpm start
Then browse to: http://localhost:8080/webpack-dev-server
npm build - build using TypeScript
npm minify - bundle and minify using webpack
npm start - start webpack-dev-server
npm test - run tests, builds project first
npm run mediaserver - starts a local http media server (see the
We use a custom license, see LICENSE.md.