skills.rest
BintzGavin
BintzGavinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

helios-player

Embed and control Helios compositions in web pages with the helios-player component.

94|6|Updated Aug 12, 2025
Search Tags:#export#player#embed#iframe#helios#web-component#picture-in-picture
One-click install
npx skills add https://github.com/BintzGavin/helios --skill helios-player
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: helios-player
Source: https://github.com/BintzGavin/helios/tree/main/.agents/skills/helios/player
Command: npx skills add https://github.com/BintzGavin/helios --skill helios-player

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-to-use web component API for embedding and controlling Helios compositions in web pages, removing boilerplate and enabling a consistent playback experience.

Core Features & Use Cases

  • Web Component Embedding: Use the <helios-player> element to load a composition from a URL and render it inline with controls.
  • Client-side Export & PiP: Enable in-browser exporting of videos and Picture-in-Picture support for enhanced viewing.
  • API & Events: Access attributes, methods, and events to build custom UIs and automation around playback.
  • Use Case: Add a marketing site demo that loads a Helios composition and allows users to play, pause, and export a local video.

Quick Start

Use the Helios player in HTML: <helios-player src="composition.html" width="1280" height="720" controls autoplay></helios-player>

Frequently Asked Questions about helios-player

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a Helios composition in a web page?▼

To embed a Helios composition, use the <helios-player> web component in your HTML. Set the src attribute to your composition URL and include width, height, and controls attributes to render it inline with playback controls.

Can I export a video from a Helios composition directly in the browser?▼

Yes, you can enable client-side exporting for Helios compositions. The player supports in-browser video exporting, allowing users to generate and download a local video file without requiring a backend server.

Does the Helios player support Picture-in-Picture mode?▼

Yes, the Helios player supports Picture-in-Picture mode. This feature allows viewers to detach the composition playback into a floating window, providing an enhanced viewing experience while interacting with other parts of the web page.

Do I need any dependencies to use the helios-player component?▼

No dependencies are required to use the helios-player component. It relies only on standard web technologies and a compatible browser, using the custom element, its attributes, and events to provide core functionality.

How do I build a custom UI around an embedded Helios composition?▼

You can build a custom UI around an embedded Helios composition using the component's rich API surface. Access available attributes, methods, and events to trigger playback automation and create custom interactive controls.

What attributes control playback when embedding a composition with a web component?▼

Standard attributes like src, width, height, controls, and autoplay control playback when embedding a composition with the web component. These attributes load the composition and render it inline with the necessary user controls.

Related Skills

Explore More Software Engineering Skills→
devMoezdevMoez
1

page-agent

Embed an in-page GUI agent that executes natural-language instructions against the current page DOM.

Community
Intermediate
BintzGavinBintzGavin
94

client-export-api

Export MP4 or WebM videos from Helios Player using the built-in VideoEncoder.

Community
Basic
yanochka11yanochka11

huggingface-gradio

Build interactive machine learning demo interfaces with Gradio components.

Community
Advanced
harshav167harshav167

avkit

Configure AVKit video playback with PiP, AirPlay, and subtitles.

Community
Advanced