VisionPlayer
The VisionPlayer - designed and developed by alphanull - is a modern open-source JavaScript-based media player that provides a comprehensive set of features. It is built with modern web technologies and is designed to be highly customizable and extensible.
The player features a highly modular architecture, composed entirely of individual components that can be freely combined and customized. This also allows for any imaginable adaptation and the addition of new features. In addition, the player also supports a unique media format, which is also both modular and extensible.
Features
The player comes with over 50 components that cover most use cases you would expect from a modern media player, plus many more! Click on one of the features below to learn more, including a quick video demo:
Playback Controls
Playback Controls
The player features the standard playback controls for play/pause, scrubber, volume, playback rate, fullscreen, loop and more. In addition, chapters are also supported and can be displayed in the controller or scrubber tooltip.
Picture & Audio Controls
Picture & Audio Controls
Apply realtime picture and audio controls for adjusting video brightness, contrast, sharpness, saturation, and color hue, or fine-tune your audio with a multiband equalizer.
Playlists
Playlists
The playlist component provides a UI for switching between multiple media items. Additional settings include continuous playback, shuffle and loop modes.
Language & Subtitles
Language & Subtitles
Each stream can offer multiple languages, and subtitles which can be selected from the language menu. Subtitle support includes WebVTT rendering with support for positioning, all writing modes, and a built-in HTML sanitizer, TTML (IMSC1/EBU-TT-D) handling, and native track integration for iOS compatibility.
Streaming
Streaming
VisionPlayer has both DASH and HLS support, both VOD and Live Streaming, fully integrated into the player UI including subtitles, audio and quality selection. It also supports encrypted media playback for premium content.
Casting
Casting
VisionPlayer supports external device playback with full UI synchronization, and even supports poster images and subtitles (if possible). Supports both Chromecast (on Google Chrome) and AirPlay (on Safari).
Dynamic Overlays
Dynamic Overlays
VisionPlayer supports dynamic overlays, including posters, images and also interactive HTML content. Overlay can be positioned and scaled in the viewport, and can be displayed at specific times during the playback.
Thumbnails
Thumbnails
Display thumbnails in the scrubber tooltip or use them for a special scrubbing mode with fullscreen preview.
Settings
Settings
The settings popup provides a comprehensive set of options for playback or configuring the player, Picture in Picture mode, loop control, quality selection, UI scaling, and more.
File playback
File playback
Play local media files by selecting a file in the file selector or by dragging and dropping file(s) into the drop zone. If several files are selected, a corresponding playlist will be generated automatically.
Accessibility
Accessibility
VisionPlayer provides comprehensive accessibility features including Picture & Audio Controls for visual/auditory impairments, keyboard navigation, and screen reader support. The player is also fully compatible with assistive technologies like VoiceOver on iOS.
Visualizer
Visualizer
The player provides components for real time audio and video visualizations, like the “ambient visualizer” shown on this page, but also audio visualizers including bar visualizer, frequency display, and waveform displays.
Furthermore, VisionPlayer also supports a wide range of additional features, including extended localization features (with 13 languages already supported), debugging features, secure mode, shadow mode, automatic quality selection and more. For more detailed information, please consult the Documentation.
Installation
VisionPlayer can be installed and used in many different ways. For full setup instructions, see the Setup Documentation. Here are some of the most common methods:
Install for use as a module
npm install @alphanull/visionplayer
import VisionPlayer from '@alphanull/visionplayer';
const myPlayer = new VisionPlayer(target, mediaData, playerConfig);
Convert existing video tags to a VisionPlayer instance
<script data-vip-autoload src="https://unpkg.com/@alphanull/visionplayer"></script>
<video data-vision-player controls src="/path/to/media" data-config='{"ui":{"alwaysVisible":true}}'></video>