interactive-video-player
v1.0.11
Published
An interactive video player framework to create engaging animations and experiences by combining different video clips. Automatically adjusts video quality based on internet speed, handles buffering efficiently, and works seamlessly across all browsers. I
Downloads
21
Maintainers
Readme
Interactive Video Animation Player
Table of Contents
Introduction
The Interactive Video Animation Player is a powerful library designed to create interactive video animations by seamlessly stitching together different video clips. This repository allows you to combine multiple video files into a cohesive animation or interactive game. It works across all major browsers, features caching to reduce buffering, and adjusts the video quality based on the user's internet speed.
With just one click, you can create an interactive game, control video playback, and even display dynamic video flows with interactive buttons. The player will automatically select a lower video quality if the internet speed is slow to ensure smooth playback, making it ideal for a wide range of users with varying network conditions.
Features
- Interactive Video Animations: Combine multiple video clips into an interactive animation or branching game. Create rich experiences with minimal setup.
- Cross-browser Compatibility: Fully functional across all modern browsers (Chrome, Firefox, Safari, Edge).
- Caching & Buffering: Utilizes caching to minimize buffering, ensuring smooth and faster video playback.
- Dynamic Video Quality Adjustment: The player detects internet speed and automatically adjusts video quality (low or high) based on the user's connection.
- Seamless Playback Flow: Automatically progresses through video clips and triggers events when certain points in the video are reached.
- Create Interactive Games: With a simple configuration, you can create interactive games that use video content as the primary medium, enabling decision points, user interaction, and more.
- Easy Integration: Easily integrate with your web projects using just a few lines of code.
Installation
Clone the repository:
git clone https://github.com/fix2015/interactive-video-player.git
Navigate to the project folder:
cd interactive-video-player
Install the dependencies using npm:
npm install
Run the project:
npm start
Configuration
The project uses a config.json
file for configuration, which allows you to define video content, internet speed testing, and the video flow sequence. Below are the key configuration settings:
Explanation of Config
The config.json
file contains the following settings:
VIDEO: Contains video flows such as "INTRO"
The VIDEO
section contains video files for each flow. A flow represents a sequence of videos (e.g., intro videos, game sequences, etc.) that are played in a defined order. You can configure multiple video files for each flow with URLs for each quality (low and high).
Example:
{
"VIDEO": {
"INTRO": [
{
"link_low": "video/intro_low.mp4",
"link": "video/intro_high.mp4",
"poster": "images/intro_poster.jpg",
"order": 1
},
{
"link_low": "video/intro_part2_low.mp4",
"link": "video/intro_part2_high.mp4",
"poster": "images/intro_part2_poster.jpg",
"order": 2
}
]
}
}
testSpeedLink: A URL for Testing Internet Speed
The testSpeedLink
is a URL to a small video file used for testing the user's internet speed. The player uses this URL to determine whether to serve a low-quality or high-quality video based on the detected speed.
Example:
{
"testSpeedLink": "https://example.com/test-speed-video.mp4"
}
startFlow: The Initial Flow to Play
The startFlow
setting defines the initial flow that starts playing when the video player is initialized. You can set this to any of the available video flow names.
Example:
{
"startFlow": "INTRO"
}
Usage
Initialize the Video Player
Once you've configured the
config.json
file, initialize the video player by passing the configuration and a wrapper element for the player:const wrapper = document.body; const videoPlayer = new VideoPlayer(wrapper, config);
Control Video Playback
You can interact with the video player through various methods like:
Play a Video:
videoPlayer.playVideo(index); // Plays the video at the specified index
Load and Play the Next Video:
videoPlayer.handleVideoEnd(); // Moves to the next video in the sequence
Generate Flow Buttons
For interactive game or branching scenarios, generate flow buttons that allow the user to navigate between different video flows:
videoPlayer.flowButtonGenerator.generate();
Generate Posters
A powerful feature of this library is the ability to generate posters for your video files automatically. This ensures that users do not encounter any blinking or white screens between videos, as the poster is pre-generated from the first frame of each video.
If you'd like to generate posters, you can use a separate repository called generate_poster, which provides a simple Bash script to automatically extract the first frame from each video and save it as a poster image.
Steps to Generate Posters:
Clone the
generate_poster
RepositoryFirst, clone the generate_poster repository:
git clone https://github.com/fix2015/generate_poster.git
Navigate to the Project Folder
After cloning, navigate to the
generate_poster
project folder:cd generate_poster
Run the Script to Generate Posters
The repository contains a Bash script (
generate_poster.sh
) that will automatically extract the first frame from each.mp4
video in the directory and save it as a.jpg
image. Run the script with:bash generate_poster.sh
This script will find all
.mp4
video files in the current folder, extract the first frame from each, and save it as a.jpg
file with the same name as the video (e.g.,video.mp4
will generatevideo_poster.jpg
).
How it Works:
- The script uses
ffmpeg
to extract the first frame of each.mp4
video. - The first frame is saved as a
.jpg
image in the same folder as the video, with the_poster
suffix added to the filename. - This process allows you to generate high-quality posters to be used in your interactive video player.
License
MIT License