Epic Video Comparator
Javascript library which implements a video comparator component: two overlaped and synchronized video players each one playing an independent source.
Overview:
The Epic Video Comparator is a JavaScript library that implements a video comparator component. It consists of two overlapped and synchronized video players, each playing an independent video source. The library is based on the epic-video-player library and supports various video formats such as WebM, Ogg Theora Vorbis, Ogg Opus, Ogg FLAC, MP4 H.264, MPEG-DASH, and HLS streams. It also allows for selecting the desired rendition to be played for ABR sources.
Features:
- Two overlapped and synchronized video players
- Supports native HTML video and various video formats
- Ability to select desired rendition for ABR sources
- Play, pause, seek, reload, and toggle full-screen functionalities
- Retrieve available renditions
- Show/hide stats boxes
- Update stats content
- Event handling for comparator creation and fullscreen mode toggle
Using it as a CommonJS module:
npm install epic-video-comparator
Using it as a UMD module within <script> tag:
You can download the library from the npm package or include it via a CDN. Once downloaded or linked, include the library using <script> tag. For example:
<script src="path_to_epic_video_comparator.js"></script>
Summary:
The Epic Video Comparator is a powerful JavaScript library for implementing a video comparator component. It provides features such as synchronized video players, support for various video formats, selection of renditions, playback control, full-screen mode, stats display, and event handling. With its easy installation process and comprehensive API methods, the Epic Video Comparator is a valuable tool for developers working with video comparison and analysis.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.