e8-video
Updated on Aug 14, 2025 9 minutes to readProvide a video player with custom controls, responsive sizing, visibility-aware autoplay, fullscreen support, and an optional mobile-friendly download action.
Overview
e8-video renders a video from a file ID or direct URL using the native HTML5 <video> element. It includes custom play/pause, seek backward/forward, mute/unmute, progress, fullscreen, loading, processing, error, and optional download controls.
For a file source, the component initially requests a thumbnail and starts the video stream when playback begins. If the server reports that the video is still being processed, the component displays a processing state and retries automatically.
Mobile behavior
- Autoplay starts muted to comply with browser and WebView playback policies.
- On iOS, the media volume is controlled by the operating system; the player can mute or unmute sound but cannot set an intermediate system volume.
- In the mobile application, the download action saves a file source to the device gallery.
- Fullscreen uses the component fallback inside the WebView instead of the native Fullscreen API.
<e8-video
source=""
source-type="file"
width="320px"
height="200px"
radius="rounded"
:responsive="false"
:loop="true"
:show-download-button="true"
:seek-seconds="15"
:show-progress-bar="true"
></e8-video>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| autoplay | Automatically plays the video muted when it is fully visible inside the configured autoplay boundary, and pauses it when it leaves that boundary. Only one e8-video instance can play at the same time. | boolean | false |
| autoplay-boundary | Boundary used to detect full visibility for autoplay. Accepts 'window', a CSS selector, an HTMLElement, or a bounds object with { top, left, bottom, right }. | string | HTMLElement | object | 'window' |
| height | Desired CSS height (e.g. '320px', '100%'). When both width and height are set and responsive is false, the video is centered inside the fixed container without being upscaled and while preserving its aspect ratio. | string | '' |
| loop | Replays the video automatically after it ends. | boolean | false |
| radius | Corner rounding. | E8VideoRadiusVariants | 'none' |
| responsive | Makes the video use the full available width and calculate its height automatically. | boolean | true |
| seek-seconds | Number of seconds used by the backward and forward seek buttons. | number | 15 |
| show-download-button | Shows a button for downloading the video in the browser or saving it to the gallery in the mobile app. The button becomes available when the video is ready. | boolean | false |
| show-fullscreen-button | Shows the fullscreen toggle. Browsers use the Fullscreen API when available and fall back to a viewport-sized overlay otherwise. The mobile application always uses the fallback mode so WebView system controls do not block the player controls. | boolean | true |
| show-progress-bar | Shows the progress/timeline bar with current time and duration. The interaction area is larger than the visible track to make seeking easier on touch devices. | boolean | true |
| source | The video source. Meaning depends on source-type. | string | — |
| source-type | Controls how source is interpreted. file treats it as a file ID and uses thumbnail/stream endpoints; url treats it as a direct video URL. | E8VideoSourceTypes | 'file' |
| video-class | Extra classes to apply to the <video> element. | E8CssClassType | — |
| video-style | Extra styles to apply to the <video> element. | E8CssStyleType | — |
| width | Desired CSS width (e.g. '320px', '100%'). | string | '' |
Events
| Event | Description | Arguments (in order) |
|---|---|---|
| on-change | Called after carousel navigation changes the active slide. | index: number, source: E8CarouselSourceType |