Overscan media player

OVERSCANUI KIT

A frame on screen is not playback. A video and audio player with the controls you expect, where PLAYING is said only while the clock is really moving with data ahead of it. Buffered is hatched and never drawn as played; a stalled network, a frozen clock and a frozen picture are each named, and counted as stalls; LIVE is claimed only near a live edge that is still moving, with the distance always printed. The pause icon is drawn only over real playback. Every theme draws the icons with its own pen and the buttons with its own furniture. The HTML standard: a stalled element "represents the last frame of the video to have been rendered".

demo/player.html, from this page

import 'overscan'
import 'overscan/overscan.css'
import 'overscan/src/player.css'
import 'overscan/src/player-icons.css'

<ov-player
  id="video"
  label="TEST CARD · 64 s"
  demo
>…</ov-player>

import { OvPlayer } from 'overscan/react'

<OvPlayer
  id="video"
  label="TEST CARD · 64 s"
  demo
/>

import { OvPlayer } from 'overscan/vue'

<OvPlayer
  id="video"
  label="TEST CARD · 64 s"
  demo
/>

import OvPlayer from 'overscan/svelte/OvPlayer.svelte'

<OvPlayer
  id="video"
  label="TEST CARD · 64 s"
  demo
/>

Video

A real <video> with captions. Keys: space or K, J / L, arrows, M, C, F. Hover the bar to see what is played, buffered, or not buffered at that point.

variation: label="ICONS" controls="icons"

import 'overscan'
import 'overscan/overscan.css'
import 'overscan/src/player.css'
import 'overscan/src/player-icons.css'

<ov-player
  label="ICONS"
  controls="icons"
  demo
>…</ov-player>

import { OvPlayer } from 'overscan/react'

<OvPlayer
  label="ICONS"
  controls="icons"
  demo
/>

import { OvPlayer } from 'overscan/vue'

<OvPlayer
  label="ICONS"
  controls="icons"
  demo
/>

import OvPlayer from 'overscan/svelte/OvPlayer.svelte'

<OvPlayer
  label="ICONS"
  controls="icons"
  demo
/>

Three versions of the controls

ICONS (the default), OVERLAY over the foot of the picture with a play button that only ever offers to start, and WORDS. The refusals are the same in all three.

variation: label="OVERLAY" controls="overlay"

import 'overscan'
import 'overscan/overscan.css'
import 'overscan/src/player.css'
import 'overscan/src/player-icons.css'

<ov-player
  label="OVERLAY"
  controls="overlay"
  demo
>…</ov-player>

import { OvPlayer } from 'overscan/react'

<OvPlayer
  label="OVERLAY"
  controls="overlay"
  demo
/>

import { OvPlayer } from 'overscan/vue'

<OvPlayer
  label="OVERLAY"
  controls="overlay"
  demo
/>

import OvPlayer from 'overscan/svelte/OvPlayer.svelte'

<OvPlayer
  label="OVERLAY"
  controls="overlay"
  demo
/>

variation: label="WORDS" controls="words"

import 'overscan'
import 'overscan/overscan.css'
import 'overscan/src/player.css'
import 'overscan/src/player-icons.css'

<ov-player
  label="WORDS"
  controls="words"
  demo
>…</ov-player>

import { OvPlayer } from 'overscan/react'

<OvPlayer
  label="WORDS"
  controls="words"
  demo
/>

import { OvPlayer } from 'overscan/vue'

<OvPlayer
  label="WORDS"
  controls="words"
  demo
/>

import OvPlayer from 'overscan/svelte/OvPlayer.svelte'

<OvPlayer
  label="WORDS"
  controls="words"
  demo
/>

Audio

A real <audio>. The waveform is decoded from this file, never drawn from a stock shape. No picture, no frame count and no caption readout: none of them would be about anything.

A live stream

Simulated. LIVE only near the end of the seekable window, while playing, with the edge still moving.

What goes wrong, side by side

Simulated media, each held in one state a real file will not show on demand.