openplayer
Advanced tools
Readme
Help OpenPlayer to reach the first thousand stars to be hosted in a CDN!
Help us staring the project and help the project to reach more and more people.
This awesome player mimics the HTML5 video/audio methods/events/properties, and integrates the most popular libraries to play different types of native media, such as MP4/MP3, HLS and M(PEG)-DASH.
It also has the ability to play VMAP, VAST and VPAID Ads in an effortless way!
20KB when gzipped.autoplay by detecting browser's capabilities.fill mode to scale and crop media relative to its parent container.crossorigin attribute.The dist folder contains the files you will need yo use this awesome library. To obtain it, you can use one of the following methods:
Download the repository from https://github.com/rafa8626/openplayer.git
npm install openplayer
Include the OpenPlayer stylesheet inside the <head> tag, and the script at the bottom of the <body> tag (both of them located in the dist folder). The bundles will contain both minified and uncompressed files, so use the one that fits the best your needs.
<link rel="stylesheet" href="/path/to/openplayer.css">
<script src="/path/to/openplayer.js"></script>
If you plan to use the library in a Node project:
// Using as module
var openplayer = require('/path/to/openplayer');
// Importing library
import OpenPlayer from 'openplayer';
Since this player uses HTML5 markup, all the attributes for video/audio tags are available. The only 3 requirements to invoke the player are:
controls and playsinline properties (to give cross-browser support).om-player om-player__media class names to invoke the player.That's it!
<video class="om-player om-player__media" controls playsinline>
<source src="/path/to/video.mp4" type="video/mp4">
</video>
There are other elements that can be included, such as Captions and multiple sources. Also, the data-om-* attributes can be used to enhance Ads or the fill mode.
<video class="om-player om-player__media" poster="/path/to/poster.jpg" controls playsinline
autoplay muted data-om-ads="[valid VAST/VPAID URL]" data-om-fill="[true|false]">
<source src="/path/to/video.m3u8" type="application/x-mpegURL">
<source src="/path/to/video.mp4" type="video/mp4">
<track label="English" kind="subtitles" srclang="en" src="/path/to/captions.vtt" default>
</video>
In the example above, the player will:
Sometimes you need more flexibility instantiating the player (for example, adding cache busting to the VAST/VPAID URL). So for that case, remove the om-player class from the video/audio tag (just leave om-player__media to preserve styles), and in Javascript use the following snippet:
var player = new OpenPlayer('[player ID]', [VAST/VPAID URL], [`true|false` for fullscreen effect], {
hls: {}, // full HLS options are in https://github.com/video-dev/hls.js/blob/master/docs/API.md#fine-tuning.
dash: {}, // For now, only `robustnessLevel`; more information in http://cdn.dashjs.org/latest/jsdoc/index.html
});
// Don't forget to start the player
player.init();
NOTE: Only caveat here is that the video/audio tags need an ID ahead of time.
If you need more control over the player, OpenPlayer stores instances of each player in the document. To have access to a specific instance, use video/audio's id and use OpenPlayer.instances element.
NOTE: if an id attribute is not detected, OpenPlayer will autogenerate one.
// Selects the first video/audio that uses OpenPlayer
var id = document.querySelector('.om-player').id;
var player = OpenPlayer.instances[id];
The methods supported by the OpenPlayer instance are:
| Method | Description |
|---|---|
play | Play media. If Ads are detected, different methods than the native ones are triggered with this operation. |
pause | Pause media. If Ads are detected, different methods than the native ones are triggered with this operation. |
load | Load media. HLS and M(PEG)-DASH perform more operations during loading if browser does not support them natively. |
addCaptions | Append a new <track> tag to the video/audio tag and dispatch event so it gets registered/loaded in the player, via controlschanged event. |
destroy | Destroy OpenMedia Player instance (including all events associated) and return the video/audio tag to its original state. |
getAd | Retrieve an instance of the Ads object. |
getMedia | Retrieve an instance of the Media object. |
activeElement | Retrieve the current media object (could be Ads or any other media type). |
getContainer | Retrieve the parent element (with om-player class) of the native video/audio tag. |
getControls | Retrieve an instance of the controls object used in the player instance. |
getElement | Retrieve the original video/audio tag. |
getEvents | Retrieve the events attached to the player. |
init | Create all the markup and events needed for the player. |
isAd | Check if current media is an instance of an Ad. |
isMedia | Check if current media is an instance of a native media type. |
id | Retrieve current player's unique identifier. |
src | Retrieve/set the current Source list associated with the player. |
Since OpenPlayer is based on HTML5 media, the way to trigger events is using the video/audio tag.
Using the code above, you can attach/dispatch any valid event, using CustomEvent, like this:
player.getElement().addEventListener('ended', function() {
console.log('Your code when media ends playing');
});
var event = new CustomEvent('ended');
player.getElement().dispatchEvent(event);
All HTML5 media events are supported by OpenPlayer, and it incorporates some custom ones:
| Event | Description |
|---|---|
controlshidden | Event executed when controls timer stops and hides control bar (video only). |
controlschanged | Event triggered when an element modified the state of the controls and they regenerate (i.e., adding new caption). |
captionschanged | Event triggered when user changes the current caption by selecting a new one from the Settings menu. |
adsended | Event executed when an Ad ends playing (currently used to change the Replay icon to Pause when playing a postroll Ad). |
Make sure you check Conventional Commits Standards for commit guidelines.
FAQs
HTML5 video and audio player
The npm package openplayer receives a total of 25 weekly downloads. As such, openplayer popularity was classified as not popular.
We found that openplayer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.