PLAYER / PLAYER

Web Player

The Player opens a package .p2lrn, checks its integrity, selects a compatible presentation, and connects the playback to the platform that contains it.

Installation

The installation is documented outside of this reference. Choose the guide that corresponds to your application and return here to configure the Player.

PROJECT DEPENDENCIES

Installation with NPM

Player integrated as application package.

WEB FILES

Web component

src

URL of the package that needs to be opened.

node

Entidad inicial opcional.

renderer

Presentation explicitly requested when you need to set a specific one.

runtime-base-url

Optional override to use a managed runtime on another source. SCORM and H5P automatically create an isolated sandbox when one is not provided.

player.adapter

Connection with Host Adapter version 1.

await player.reload()

Reopen the package and refresh the playback.

Public API

P2LRN.mount(target, options)

Mount the Player. options may include Host Adapter, Capability Broker and package cache.

P2LRN.openPackageURL(url, options)

Opens a remote package, uses HTTP Range when available, and can reuse a verified cache.

P2LRN.openPackageBytes(buffer, limits)

Opens bytes already available in memory.

P2LRN.renderers() · components() · dependencies()

They inspect the runtime logs.

P2LRN.installServiceWorker(options)

Installs the static resource bridge when the host needs navigable URLs for already verified content.

Connected services

createCapabilityBroker()

Negotiates semantic capabilities declared by the course and authorizes each operation with a deny-by-default policy.

createToolCapabilityProvider() · createMcpCapabilityProvider()

They map semantic operations to trusted tools configured by the host; endpoints and credentials do not come in the package.

createHttpCollaborationProvider()

Connect collaboration.room with an authenticated host endpoint.

createMemoryResourceLibrary() · createCacheStorageResourceLibrary()

SHA-256 verified library for reusable resources; can connect to createResourceLibraryResolver().

Offline and analytics

createOfflineHostAdapter()

Wraps Host Adapter v1 with local state and ordered outbox. createOfflineSyncController() adds opt-in synchronization upon connection return.

createCacheStoragePackageCache()

Saves entire bytes of courses only after verifying them. cachePackageURL() and player.loadCachedPackage() They allow them to be reopened without a network.

createActivityTracker()

Measures active/idle time in an opt-in manner and limited to the Player's context.

createLearningEventStream() · observeLearningEvents()

They project runtime events to an ordered model of learning events with session/attempt and semantic categories.

Integrity and transport

The Player validates the manifest, the graph and the resources it consumes. When a server supports HTTP Range, it can first check the package structure and load specific resources on demand.

Default limits

Full buffer: 256 MiB. Remote package: up to 64 GiB. Entries: 5000. These are Player protection limits, not a course size recommendation.

Events

Listen to Player events when your app needs to react to loading, score, status, completion, or errors.

JavaScript

const player = document.querySelector('p2lrn-player');

for (const type of ['p2lrn:ready','p2lrn:activityready','p2lrn:answer','p2lrn:progress','p2lrn:score','p2lrn:statechange','p2lrn:complete','p2lrn:progressionchange','p2lrn:xapi','p2lrn:error']) {
  player.addEventListener(type, (event) => console.log(type, event.detail));
}

Query Events for the contract event.detail and Metrics and analytics to know what to save and how to get notes, answers, CMI SCORM, xAPI H5P and course progress.

Host Adapter

The Host Adapter allows you to load and save state, report scores, send events, and resolve protected resources. A URL delivered via resolveResourceUrl debe indicar verified:true for the Player to accept it.

View the integration guide →

SCORM and H5P inside the package

When the .p2lrn contains a SCORM or H5P, the Player maintains that content within the package and prepares its execution in memory. If no isolated external runtime exists, it automatically creates an opaque source sandbox iframe.

SCORM

The SCO files are transferred to the sandbox and the SCORM API communicates with the Player using messages.

H5P

The H5P and its dependencies are moved to the sandbox. If shared libraries are missing, the Player resolves them from the catalog that accompanies the distribution.

Runtime externo

It is optional for SCORM and H5P. Use runtime-base-url only when the integration wants to manage that environment separately.

Supported content

The Player includes presentations for web and text content, multimedia, quizzes, 2D and 3D games, components, composite groups, and educational packages compatible with available runtime environments.

3D games

The 3D activities use Three.js for the scene and Rapier for the physics. The mechanics of ordering, relating and classifying are part of P2LRN. See 3D games →

Service Worker and verified cache

The Service Worker serves resources belonging to packages that the Player has already verified. It is not necessary for all courses.

The package cache and learner state are independent stores: createCacheStoragePackageCache() preserves course bytes; createOfflineHostAdapter() preserves snapshots/outbox of the user. None writes learning history within the .p2lrn.

JavaScript · explicit cache

const cache = P2LRN.createCacheStoragePackageCache();
const saved = await P2LRN.cachePackageURL('/courses/algebra.p2lrn', {store: cache});
player.packageCache = cache;
await player.loadCachedPackage(saved.contentRoot);

Test a package

The viewer allows you to open a course with the Player and review the loading information and events generated during playback.