npm: npm i playerx
cdn: https://unpkg.com/playerx
module: https://unpkg.com/playerx?module
Features
- Uniform player API across player platforms. Mimics the
HTMLMediaElementAPI when possible. - UI framework independent, intentionally uses no specific framework to have great interop across the board and keep the bundle size in check.
- Responsive out of the box and easy attributes to maintain a specific aspect-ratio.
- Extensible with powerful add-ons like custom previews, analytics, custom skins, etc.
Usage (Codesandbox)
import 'playerx';
document.body.innerHTML = `
<player-x src="https://vimeo.com/357274789"></player-x>
`;Demo page: dev.playerx.io/demo
Browser Support
Playerx supports modern browsers and IE11+ (requires some polyfills).
Include this script before importing Playerx.
<script src="//unpkg.com/@playerx/polyfills/dist/polyfills.umd.js"></script>
Status
Playerx is in beta status, it can be used in production but use at your descretion.
⚠️ License
Be sure to read the license terms. In most cases Playerx is free to use but if your project profits from this software you should buy a commercial license at dev.playerx.io.
Docs
Properties
| Prop | Description | Default |
|---|---|---|
aspectRatio |
Is a Number that can set the preferred aspect ratio for the player. |
undefined |
autoplay |
A Boolean that reflects the autoplay HTML attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption. |
false |
buffered Read only |
Returns a TimeRanges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed. |
undefined |
config |
A plain object that contains platform specific settings. See below |
|
controls |
Is a Boolean that reflects the controls HTML attribute, indicating whether user interface items for controlling the resource should be displayed. | false |
currentSrc Read only |
Returns a DOMString with the absolute URL of the chosen media resource. | '' |
currentTime |
A double-precision floating-point value indicating the current playback time in seconds; if the media has not started to play and has not been seeked, this value is the media's initial playback time. Setting this value seeks the media to the new time. The time is specified relative to the media's timeline. | 0 |
duration Read only |
A read-only double-precision floating-point value indicating the total duration of the media in seconds. If no media data is available, the returned value is NaN. If the media is of indefinite length (such as streamed live media, a WebRTC call's media, or similar), the value is +Infinity. |
NaN |
ended Read only |
Returns a Boolean that indicates whether the media element has finished playing. |
false |
error Read only |
null |
|
height |
Is a DOMString that reflects the height HTML attribute, which specifies the height of the display area, in CSS pixels. | undefined |
loop |
A Boolean that reflects the loop HTML attribute, which indicates whether the media element should start over when it reaches the end. |
false |
muted |
Is a Boolean that determines whether audio is muted. true if the audio is muted and false otherwise. |
false |
paused Read only |
Returns a Boolean that indicates whether the media element is paused. |
true |
playbackRate |
Is a double that indicates the rate at which the media is being played back. | 1 |
playing |
Is a Boolean that reflects the playing HTML attribute, that can play and pause playback. |
false |
playsinline |
A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. | false |
preload |
Is a DOMString that reflects the preload HTML attribute, indicating what data should be preloaded, if any. Possible values are: none, metadata, auto. |
undefined |
src |
Is a String that reflects the src HTML attribute, which contains the URL of a media resource to use. |
undefined |
videoHeight Read only |
Returns an unsigned integer value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet. | 0 |
videoWidth Read only |
Returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet. | 0 |
volume |
Is a double indicating the audio volume, from 0.0 (silent) to 1.0 (loudest). | 1 |
width |
Is a DOMString that reflects the width HTML attribute, which specifies the width of the display area, in CSS pixels. | undefined |
config property
| Key | Options |
|---|---|
brightcove |
account: '' Account key |
dailymotion |
See all custom options |
facebook |
appId: '' Your own Facebook app IDversion: 'v3.2': Facebook SDK version |
jwplayer |
See all custom options player: '' Player ID used in the player URL. key: '' Or via a key for the advanced embed. |
soundcloud |
See all custom options |
vidyard |
See all custom options |
vimeo |
See all custom options color: '00adef' Specify the color of the video controls. Colors may be overridden by the embed settings of the video. title: true Show the title on the video. byline: true Show the byline on the video. portrait: true Show the portrait on the video. |
wistia |
See all custom options |
youtube |
See all custom options rel: 0 If the rel parameter is set to 0, related videos will come from the same channel as the video that was just played. iv_load_policy: 3 Setting the parameter's value to 1 causes video annotations to be shown by default, whereas setting to 3 causes video annotations to not be shown by default. modestbranding: 1 This parameter lets you use a YouTube player that does not show a YouTube logo. Set the parameter value to 1 to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player. |
Methods
Instance Methods
| Method | Description |
|---|---|
play(): Promise |
Begins playback of the media, returns a promise that resolves when playing starts. |
pause(): void |
Pauses the media playback. |
addEventListener(name, handler, opts): void |
The EventTarget method sets up a function that will be called whenever the specified event is delivered to the target. |
removeEventListener(name, handler, opts): void |
This method removes from the EventTarget an event listener previously registered. |
ready(): Promise |
Trigger a function when the player has initialized. You do not need to wait for ready to trigger to begin adding event listeners or calling other methods. |
load(): Promise |
Resets the media to the beginning and selects the best available source from the sources provided using the src attribute or the <source> element. |
Events
| Event | Description |
|---|---|
durationchange |
|
ended |
|
error |
|
loadedsrc |
|
loadsrc |
|
loadstart |
|
pause |
|
play |
|
playing |
|
progress |
|
ratechange |
|
ready |
|
timeupdate |
|
volumechange |
Supported media
- YouTube videos use the YouTube iFrame Player API
- Facebook videos use the Facebook Embedded Video Player API
- SoundCloud tracks use the SoundCloud Widget API
- Streamable videos use
Player.js - Vimeo videos use the Vimeo Player API
- Wistia videos use the Wistia Player API
- Twitch videos use the Twitch Interactive Frames API
- DailyMotion videos use the DailyMotion Player API
- Vidyard videos use the Vidyard Player API
- Supported file types are playing using
<video>or<audio>elements
Similar Projects
Big Thanks
To all the services that offered free plans for building, testing and measuring!