WirePlayer

WirePlayer is WireVoD’s web player. It takes a playback session, plays the lesson with adaptive quality, handles content protection automatically and reports playback insights.

Install

Script tag

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.24.1/dist/video-js.min.css" />
<video id="lesson" class="video-js" playsinline></video>

<script src="https://cdn.jsdelivr.net/npm/video.js@8.24.1/dist/video.min.js"></script>
<script src="https://wirevod.online/player/v0.1.0/wireplayer.min.js"></script>
<script>
  const player = new WireVoD.WirePlayer("lesson", {
    source: { session: () => fetch("/api/lessons/1/session").then((r) => r.json()) },
  });
</script>

The player loads its protection module from the same location only when a lesson needs it.

Session you already have

JavaScript

const player = new WireVoD.WirePlayer("lesson", {
  source: {
    manifestUrl: session.urls.manifest,
    telemetryUrl: session.urls.telemetry,
    entitlementUrl: session.urls.entitlement, // protected lessons only
  },
});

source.session is called on every load, so it’s the best place to create a fresh session from your backend.

Options

Option	Default	Description
source	required	{ session: () => Promise<session> } or { manifestUrl, telemetryUrl?, entitlementUrl? }
autoplay	false	Start as soon as the lesson is ready (browsers may require muted)
muted	false	Start muted
controls	true	Show the control bar and quality menu
telemetry.enabled	true	Report playback insights
telemetry.flushIntervalMs	10000	How often insights are sent

Methods

Method	Description
ready()	Promise that resolves when the lesson is loaded
play() / pause()	Control playback
qualities()	Available qualities, e.g. [{ id: "auto" }, { id: "1080p" }, { id: "720p" }]
setQuality(id)	Pin a quality ("720p") or return to automatic ("auto")
on(event, listener)	Subscribe to an event; returns an unsubscribe function
destroy()	Send remaining insights and remove the player

Events

Event	Payload
ready	—
startup	{ startupMs }: time from pressing play to the first frame
stall	{ playheadMs }: playback paused to wait for data
qualitychange	{ rendition, bitrateKbps? }
error	{ code, message? }; see Content protection for drm_* codes
ended	—

JavaScript

player.on("error", ({ code }) => {
  if (code === "drm_unsupported") showMessage("Please use a supported browser to watch this lesson.");
});