<script type="module" src="path/to/@helios-project/player/dist/index.js"></script>

<helios-player
  src="composition.html"
  width="1280"
  height="720"
  controls
  autoplay
  input-props='{"title": "My Video"}'
></helios-player>

helios-player {
  --helios-controls-bg: rgba(0, 0, 0, 0.8);
  --helios-text-color: #ffffff;
  --helios-accent-color: #ff0000;
  --helios-range-track-color: #555555;
  --helios-range-selected-color: rgba(255, 255, 255, 0.5);
  --helios-font-family: 'Helvetica', sans-serif;
}

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

// Playback Control
player.play();
player.pause();
player.load();
player.requestPictureInPicture(); // Enter PiP mode
player.currentTime = 5.0; // Seek to 5 seconds
player.currentFrame = 150; // Seek to frame 150

// Audio Control
player.volume = 0.5; // 0.0 to 1.0
player.muted = true;

// Writable Properties
console.log(player.duration);     // Total duration in seconds
console.log(player.paused);       // Boolean
console.log(player.playbackRate); // Speed multiplier
console.log(player.fps);          // Composition FPS
console.log(player.loop);         // Loop state
console.log(player.autoplay);     // Autoplay state

// Read-Only Properties
console.log(player.videoWidth);   // Intrinsic width
console.log(player.videoHeight);  // Intrinsic height
console.log(player.readyState);   // 0-4 (HAVE_NOTHING to HAVE_ENOUGH_DATA)
console.log(player.networkState); // 0-3 (EMPTY, IDLE, LOADING, NO_SOURCE)
console.log(player.seeking);      // Boolean (true while scrubbing)
console.log(player.played);       // TimeRanges object of played segments
console.log(player.buffered);     // TimeRanges object of buffered segments
console.log(player.seekable);     // TimeRanges object of seekable segments
console.log(player.error);        // MediaError object if failed

// Input Props
player.inputProps = { title: "Updated Title" };

// Text Tracks
console.log(player.textTracks);
const track = player.addTextTrack("captions", "English", "en");

// Access active cues
track.addEventListener("cuechange", () => {
  console.log("Active Cues:", track.activeCues);
});

const controller = player.getController();

if (controller) {
  const state = controller.getState();

  // Dynamic Updates
  controller.setDuration(30);       // Update duration to 30s
  controller.setFps(60);            // Update FPS to 60
  controller.setSize(1080, 1080);   // Update resolution
  controller.setMarkers([{ id: "m1", time: 5, label: "Intro" }]);
}

const report = await player.diagnose();
console.log("WebCodecs support:", report.webCodecs);

<helios-player src="...">
  <track kind="captions" src="captions.srt" default>
</helios-player>