The Humix Player API allows you to embed a video player on your website and customize it. This guide outlines how to customize the player through configuration options.
The Humix Player API allows you to embed a video player on your website and customize it. This guide outlines how to customize the player through configuration options.
Embedded players should have a viewport of at least 320px by 320px to ensure controls are fully visible.
Here is one example setup to customize a Humix player. It will autopick a video and insert it the video above the script tag.
<!DOCTYPE html>
<html>
<body>
<script>
(window.humixPlayers = window.humixPlayers || []).push({
target: document.currentScript,
});
</script>
<script async data-cfasync="false" src='https://www.humix.com/video.js'></script>
</body>
</html>
Here is another example where the embed code that will pick a specific video to play on the page. All you need to do is replace ${VIDEO_ID_HERE} with the actual video ID you want to use in each page:
<script data-cfasync="false">
(window.humixPlayers = window.humixPlayers || []).push({
target: document.currentScript,
videoID: `${VIDEO_ID_HERE}`,
});
</script>
<script src='https://www.humix.com/video.js'></script>The second example above uses a simple configuration object for the video:
{ target: document.currentScript, videoID: ${VIDEO_ID_HERE} }The configuration object defines the properties of the player. Here’s a breakdown of the parameters you can customize:
Main Parameters
target (HTMLElement | "autoinsert"): Specifies where the Humix player will be placed.
If an HTMLElement: The player will be inserted into this element.
If a script tag: The player will be inserted before it, inside its parent element.
If "autoinsert": The player will be automatically placed in a suitable location.
videoID (String): The unique identifier for the video to load in the player.
autoplay (Boolean): If `true`, the video will start playing automatically when the player is ready. Default: uses the domain’s autoplay settings in dashboard
controls (Boolean): If `true`, the player controls (play, pause, volume, etc.) will be visible. Default: true
float (Boolean): If `true`, the video will be allowed to stick to the bottom of the page when the video is scrolled out of view. Default: uses the domain float settings in dashboard
It is important to note that width and height aren't supported in the config object. You will need to add any customizations in the element where the video will be inserted.
you only need to load the js script: https://www.humix.com/video.js once to get multiple videos. Then you can queue multiple videos by pushing configs into window.humixPlayers object like so:
window.humixPlayers = window.humixPlayers || [];
window.humixPlayers.push({videoID: ‘aabbccddee’, …});
window.humixPlayers.push({videoID: ‘ffgghhiijjkk’, …});
window.humixPlayers.push({...});