Load the library
html<script src="https://cdn.mediathrive.com/js/mediakit.js"></script>
Drop in a player container
html<div data-mediathrive>
<div class="mediakit-audio-player"></div>
<div class="mediakit-video-player"></div>
</div>
That’s all. The script automatically calculates the correct manifest URL for the current page (based on an internal hash of the domain + path) and loads it.
If that URL returns 404 there’s simply nothing to play—no error is shown.
| Attribute | Purpose | Default |
|---|---|---|
data-mediathrive | Marks the element as a MediaKit player. Required. | — |
data-manifest | Override the auto-detected manifest URL if you need to point to a different one. | Auto |
data-demo | Load a random demo manifest for quick testing. | Off |
data-log-level | Console log verbosity: DEBUG, INFO, WARN, ERROR (or 0 – 3). | INFO |
data-audio-div | Class name of a child <div> to host the audio UI. | mediakit-audio-player |
data-video-div | Class name of a child <div> to host the video UI. | mediakit-video-player |
data-videosrc | Direct video URL (HLS/MP4) when you don’t want to use a manifest video section. | — |
Example
html<div
data-mediathrive
data-manifest="https://cdn.mediathrive.com/custom/override.json"
data-log-level="DEBUG"
>
<div class="mediakit-audio-player"></div>
<div class="mediakit-video-player"></div>
</div>
MediaKit hashes the domain and current URL.
https://cdn.mediathrive.com/<hash>/manifest.jsonIf the request returns 200, the player loads content.
If the request returns 404, the player stays hidden—perfectly acceptable when you don’t yet have media for that page.
Use data-manifest only when you want to override this behaviour.
window.MediaThrive)| Method | Description |
|---|---|
init(opts?) | Scan DOM and (re)initialise players. |
getInstance(id) | Retrieve one player by ID. |
getAllInstances() | All players keyed by ID. |
reinitialize(id, attrs) | Hot-swap attributes (e.g., new manifest). |
cleanup(id) / cleanupAll() | Destroy player(s). |
setLogLevel(level) | Change global log level. |
MediaThrive.LOG_LEVELS provides the constants.
| Category | Events (audio) | Notes |
|---|---|---|
Lifecycle | audio-started, audio-paused, audio-ended | Video versions are prefixed video-. |
Progress | audio-progress (fires every 10 %) | Milestones: audio-progress-10/20/../90/100. |
Each event’s detail object supplies: playerId, currentTime, duration, progress, etc.
Attach handlers:
javascriptconst MT = window.MediaThrive;
MT.on('audio-started', e => console.log('Started', e.detail));
Set during markup …
html<div data-mediathrive data-log-level="DEBUG"></div>
…or at runtime …
javascriptwindow.MediaThrive.setLogLevel(window.MediaThrive.LOG_LEVELS.WARN);
Override CSS inside [data-mediathrive] { … }.
Player ships with a small “Powered by MediaThrive” badge—intended to stay visible.
| Feature | How to use |
|---|---|
Video Playback | Add a video section in the manifest or set data-videosrc. MediaKit lazy-loads video.js from jsDelivr. |
Autoplay Next | If the manifest includes a suggestion, the player shows an “Up Next” prompt and can auto-advance (user-controlled). |
Demo Mode | Add data-demo to any player for instant sample content. |
Performance | Core bundle is audio-only; video assets load on demand. |
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>MediaKit Demo</title>
<style>
body { font-family: sans-serif; padding: 2em; }
.box { margin-bottom: 2em; border: 1px solid #ccc; padding: 1em; }
</style>
<script src="https://cdn.mediathrive.com/js/mediakit.js"></script>
</head>
<body>
<h1>MediaThrive MediaKit – Examples</h1>
<!-- Demo -->
<div class="box">
<h2>Random Demo</h2>
<div data-mediathrive data-demo></div>
</div>
<!-- Override manifest -->
<div class="box">
<h2>Explicit Manifest</h2>
<div
data-mediathrive
data-manifest="https://cdn.mediathrive.com/manifests/example.json"
data-log-level="DEBUG"
></div>
</div>
<script>
const MT = window.MediaThrive;
MT.on('audio-started', e => console.log('Started:', e.detail));
MT.on('audio-ended', e => console.log('Ended:', e.detail));
</script>
</body>
</html>
Player not visible?
• Check the script URL.
• Confirm data-mediathrive is present.
• A 404 on the auto-manifest is acceptable—no player shows until content exists.
No sound/video?
• Verify src URLs inside the manifest.
• Confirm MIME types.
• Check CORS headers for cross-domain media.
Autoplay blocked?
Browser policies may require user interaction. MediaKit prompts when needed.
Styling issues?
Namespace overrides under [data-mediathrive].
Need help?
Email [email protected] – we’re here to assist.
Happy streaming!