Agnoplay provides a simple way to display video- and audio assets on your website or application: it is possible to embed Agnoplay using our JavaScript (JS) implementation, NPM packages (ReactJS, Vue, and Angular), WordPress plugin or iFrame implementation. The player can either resolve a streamsource from the given CDN, or resolve any VMS (Video Management System) source from which the stream source is being obtained. The player can handle any type of stream source, whether it’s HLS, DASH, MP4 or MP3. Note that Agnoplay is compatible with all modern platforms and devices in HTML5 without needing other plugins. The player can be used for all popular desktop platforms such as Windows, Mac and Linux, but also for mobile platforms such as iOS and Android by means of native SDKs.
Developers will get access to the Agnoplay iOS or Android repository, from there the readme should be followed thoroughly.
To get access, please consult the Agnoplay team.
To embed our player in your website there are several options:
All implementation methods provide flexibility to all product owners and developers.
First, let us define the requirements for each implementation:
To enable the playback of video with the Agnoplay video player an active license is mandatory. You will receive a license key for each active brand in your account. When implementing the player in your app or website, just add a license_key parameter with the corresponding license key for your brand, e.g.
<div id="agnoplayer"></div>
<script crossorigin="anonymous" src="https://player.agnoplay.com/static/agnoplay/js/agnoplay.js"></script>
<script>
var element = document.getElementById("agnoplayer"),
config = {
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
license_key: 'sample_license_key'
};
var player = window.AGNO.insertPlayer(config, element);
</script>
When your different DTAP environments have been set up, we advise the following:
// Latest version
<script src="https://player-acc.agnoplay.com/static/agnoplay/js/agnoplay.js"></script>
// Fixed version
<script src="https://player-acc.agnoplay.com/static/agnoplay/x.y.z/js/agnoplay.js"></script>// Latest version
<script src="https://player.yourdomain.com/static/agnoplay/js/agnoplay.js"></script>
// Fixed version
<script src="https://player.yourdomain.com/static/agnoplay/x.y.z/js/agnoplay.js"></script>NOTE: during initial setup the agnoplay.com domain will be used as a Production environment, for a swift release.
Secondly, we start by defining the configuration of the player in the most minimal form. The following settings are possible:
<div id="agnoplayer"></div>
<script crossorigin="anonymous" src="https://player.yourdomain.com/static/agnoplay/js/agnoplay.js"></script>
<script>
var element = document.getElementById("agnoplayer"),
config = {
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href
license_key: 'sample_license_key'
};
var player = window.AGNO.insertPlayer(config, element);
</script>
This code fetches the json formatted player configuration from the CDN based on the brand name. In this case the following json file will be retrieved from:
https://player.yourdomain.com/static/api/v1/configs/agnoplay.jsonThe player will be initiated based on this configuration.
The player can be updated with another config
function updatePlayer() {
var config = {
// required parameters:
brand: "agnoplay",
videoId: "OTHER_VIDEO_ID",
url: window.location.href,
};
window.AGNO.updatePlayerConfig('agnoplayer', config);
return false; // don't refresh the page
}
Since the player loads its dependencies asynchronously, you can also instruct the browser to preload resources from the player to improve the player's loading speed on the pages that are heavy with other third-party libraries
For example a video article detailpage.
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplay/js/agnoplay.js"> // required
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplay/js/moatChunk.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplay/js/cimChunk.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplay/js/gaChunk.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplay/js/youboraChunk.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/agnoplayer.js"> // required
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/video.js/dist/video.min.js"> // required
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/mux.js/dist/mux.min.js"> // required
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/shaka-player/dist/shaka-player.compiled.js"> // required
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/conviva/conviva-core-sdk.min.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/hls.js/dist/hls.min.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/jump/jumpKit.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/jump/jumpKitVideoJSPlayerExtension.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-overlay/dist/videojs-overlay.min.js"> // optional based on features used
<link rel="preload" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-vr/dist/videojs-vr.min.js"> // optional based on features used
<link rel="preload" as="style" href="https://player.agnoplay.com/static/agnoplayer/agnoplayer.css"> // required
<link rel="preload" as="style" href="https://player.agnoplay.com/static/agnoplayer/vendor/video.js/dist/video-js.min.css"> // required
<link rel="preload" as="style" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-overlay/dist/videojs-overlay.css"> // optional based on features used
<link rel="preload" as="font" type="font/woff" crossorigin="anonymous" href="https://player.agnoplay.com/static/agnoplayer/fonts/Roboto-Regular.woff"> // required
<link rel="preload" as="font" type="font/woff" crossorigin="anonymous" href="https://player.agnoplay.com/static/agnoplayer/fonts/Roboto-Bold.woff"> // required
For example www.example.com/videos sectionpage that doesn't have a player, but has a list of videos that open a page with a player.
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplay/js/agnoplay.js"> // required
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplay/js/moatChunk.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplay/js/cimChunk.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplay/js/gaChunk.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplay/js/youboraChunk.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/agnoplayer.js"> // required
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/video.js/dist/video.min.js"> // required
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/mux.js/dist/mux.min.js"> // required
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/shaka-player/dist/shaka-player.compiled.js"> // required
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/conviva/conviva-core-sdk.min.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/hls.js/dist/hls.min.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/jump/jumpKit.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/jump/jumpKitVideoJSPlayerExtension.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-overlay/dist/videojs-overlay.min.js"> // optional based on features used
<link rel="prefetch" as="script" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-vr/dist/videojs-vr.min.js"> // optional based on features used
<link rel="prefetch" as="style" href="https://player.agnoplay.com/static/agnoplayer/agnoplayer.css"> // required
<link rel="prefetch" as="style" href="https://player.agnoplay.com/static/agnoplayer/vendor/video.js/dist/video-js.min.css"> // required
<link rel="prefetch" as="style" href="https://player.agnoplay.com/static/agnoplayer/vendor/videojs-overlay/dist/videojs-overlay.css"> // optional based on features used
<link rel="prefetch" as="font" type="font/woff" crossorigin="anonymous" href="https://player.agnoplay.com/static/agnoplayer/fonts/Roboto-Regular.woff"> // required
<link rel="prefetch" as="font" type="font/woff" crossorigin="anonymous" href="https://player.agnoplay.com/static/agnoplayer/fonts/Roboto-Bold.woff"> // required
To determine the list of resources to preload for your specific use case you can check the network tab in devtools and filter on agnoplay host name to see what resources are actually used on your website
The player can be disposed by the player id
window.AGNO.disposePlayer('agnoplayer');
All the players can be disposed at the same time
window.AGNO.disposeAll();
Each player comes with a default configuration. The configuration can be changed within the Control Panel (coming soon). During the initialization of the player the configuration settings are applied and its ready for playback.
Now, all configuration settings can be overridden by preference. For example, the above configuration does not come with the autoplay feature. But, if you would like to use it, you can pass an extra parameter like:
...
// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href
// optional parameters:
autoplay: true // where default configuration was set to false
...
This allows full flexibility to the developer to define and override parameters to enable / disable certain features as desired.
An example of using the iFrame implementation can be found here.
Next to Autoplay, the player comes with lots of features that can be configured. Please continue to browse all features where you'll find more information about what each feature represents, including code examples.
Another powerful feature that needs some clarification is profiling. This gives the player possibilities to target specific device + browsers for certain features.
Profiles can be managed in the Control Panel (coming soon) and connected to a player configuration.
When you want to embed multiple players on the same page, you'll need to define unique element identifiers. Let us give an example:
// id appended with 1
<div id="agnoplayer-1"></div>
// id appended with 2
<div id="agnoplayer-2"></div>In this way the players are distinguished and isolated for correct playback.
The player can be addressed through the AGNO object. In the following example the player element can be retrieved as follow:
window.AGNO.Players.getPlayerById('YOUR_PLAYER_ID').agnoInstance.element;
The player can be addressed through the AGNO object. The following example shows how to subscribe to AGNO events:
document.addEventListener('agnoLoaded', function(e) {
// Now you know that the player has been loaded and the instance is available
// The playerId can be retrieved as follow:
var playerId = e.detail.playerId;
// Here you can add code to manipulate the player
}
document.addEventListener('agnoReset', function(e) {
// Now you know that the player has been resetted
// The playerId can be retrieved as follow:
var playerId = e.detail.playerId;
// Here you can add code to manipulate the player
}
The player can be addressed through the AGNO object. The following example shows how the player can be played / paused / stopped:
// Per player
window.AGNO.play('YOUR_PLAYER_ID') // Starts or resumes playback.
window.AGNO.pause('YOUR_PLAYER_ID') // Pauses playback. Playback can be resumed by calling .play().
window.AGNO.stop('YOUR_PLAYER_ID') // Stops playback.
// PLEASE NOTE: ".stop()" releases all resources associated with the currently loaded source.
// A new source can be loaded later on by setting player.source.
window.AGNO.cancelUpnext('YOUR_PLAYER_ID') // Cancels the upnext feature. Does only something when the upnext countdown is active.
// The following helpers will propagate the above behaviours to all players on the page.
window.AGNO.playAll()
window.AGNO.pauseAll()
window.AGNO.stopAll()
// The following helper will propagate the above behaviours to all players on the page except the given one
window.AGNO.pauseAllExcept('YOUR_PLAYER_ID')The player can be addressed through the AGNO object. The following example shows how to subscribe to player events:
var player = Players.getPlayerById('YOUR_PLAYER_ID').agnoInstance;
player.addEventListener('playing', function(e) {
// do magic
}
The player can be addressed through the AGNO object. Let us provide some other options:
// List all players
window.AGNO.Players.list
// Get Agnoplayer version
window.AGNO.getVersion(function(version) {
// do whatever you want with the version
...
})
// Alternative with Promise
window.AGNO.getVersion().then(function(version) {
// do whatever you want with the version
...
// Get detected browser info by AGNO
window.AGNO.getBrowserInfo(e => {console.log(e)})
...
})window.AGNO has a Players key which is a class that contains a list of all the players on the page with the player id as key. Each ‘Player’ class contains the brand and implementation configuration and the player instance.