OpenPlayer

OpenPlayer is a lightweight, reusable HTML5 video player built with plain JavaScript and CSS. It can be used in hero sections, articles, landing pages, and other content areas without framework dependencies.

Features

• Play and pause
• Stop and return to the beginning
• Seek with a range slider
• Mute and unmute
• Fullscreen mode
• Live playback status
• Elapsed time and duration display
• Header, footer, or overlay controls
• Keyboard-accessible buttons and seek control
• Inline SVG icons
• Responsive layout
• Reduced-motion support

Files

player.js OpenPlayer behavior and controls
player.css OpenPlayer styles
example.html Working example using test-video.mp4
test-video.mp4 Example video source

Basic usage

Include the stylesheet and script, then add a video element. OpenPlayer supports a poster image while the video loads:

<videoid="my-video" poster="video-thumb.jpg" preload="none" playsinlinearia-label="Product demonstration"><sourcedata-src="video.mp4" type="video/mp4"></video>

With the default lazyLoad: true, the source is assigned and loaded when OpenPlayer initializes. This keeps the video URL out of the initial media request while allowing the user to see the poster immediately. For an even later load, initialize OpenPlayer only when the player enters the viewport.

newOpenPlayer(document.querySelector('#my-video'),{lazyLoad: true});

Include the stylesheet and script, then add a video element:

<linkrel="stylesheet" href="player.css"><videoid="my-video" preload="metadata" playsinlinearia-label="Product demonstration"><sourcesrc="video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><scriptsrc="player.js"></script><script>newOpenPlayer(document.querySelector('#my-video'),{controlsPosition: 'footer',label: 'Product demonstration'});</script>

The video must be available in the browser and should include a descriptive aria-label. For videos with meaningful spoken content, provide captions with a WebVTT track:

<trackkind="captions" src="captions.vtt" srclang="en" label="English">

Control bar placement

Footer controls

<divclass="op-controls op-controls-footer" aria-label="Video controls"></div>

newOpenPlayer(video,{controlsPosition: 'footer'});

Header controls

<divclass="op-controls op-controls-header" aria-label="Video controls"></div>

newOpenPlayer(video,{controlsPosition: 'header'});

Overlay controls

Overlay controls conserve space by placing the toolbar over the bottom of the video. The toolbar is revealed when the player is hovered or when a control receives keyboard focus.

<divclass="op-controls op-controls-overlay" aria-label="Video controls"></div>

newOpenPlayer(video,{controlsPosition: 'overlay'});

Defining the controls container in HTML allows each use of the player to choose its placement. OpenPlayer fills the existing .op-controls element rather than creating a second toolbar.

Configuration

newOpenPlayer(video,{controlsPosition: 'footer',// 'header', 'footer', or 'overlay'label: 'Video player'});

Options

Option	Type	Default	Description
controlsPosition	'header' | 'footer' | 'overlay'	'footer'	Determines where the control bar is placed.
label	string	Video aria-label or 'Video player'	Accessible name for the player wrapper.

CSS customization

Override the OpenPlayer custom properties to match your site:

.op-player {
--op-bg:#111827;
--op-panel:#1f2937;
--op-border:#374151;
--op-text:#f9fafb;
--op-muted:#9ca3af;
--op-accent:#2dd4bf;
}

All player-specific classes use the op- prefix.

Accessibility

• Controls use native <button> and <input type="range"> elements.
• Every icon button has an accessible label.
• Focus indicators remain visible.
• The status region uses role="status" and aria-live="polite".
• Overlay controls remain visible while navigating with the keyboard.
• Do not autoplay video with sound.
• Add captions for video dialogue and important audio.

Running the example

Open example.html in a browser, or serve the directory through a local web server. The example loads test-video.mp4 and uses overlay controls.