Home
Softono
Custom-Video-Player

Custom-Video-Player

Open source MIT JavaScript
Website GitHub
15
Stars
9
Forks
0
Issues
5
Watchers
3 weeks
Last Commit
JavaScript Libraries & Components Video Streaming & Transcoding

About Custom-Video-Player

HTML5 Video Player, based on Fluid Player v3.0.4

Platforms

Web Self-hosted

Languages

JavaScript

Links

Website Source Code
j
Published by
joel2b
Visit View Profile

README.md

View on GitHub

Custom Video Player

HTML5 Video Player, based on Fluid Player v3.0.4

Desktop

image

Mobile

1 2

Difference with fluid player

  • Some errors fixed
  • No ads support (VAST/VPAID)
  • Smooth animations
  • Customized timeline
  • Customized thumbnails
  • A main menu
    • Autoplay
    • Loop
    • Speed
    • Quality
    • Audio
    • Subtitles
  • Forward and backward one frame

Demo

Custom Video Player

E2E cases

Setup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
    <title>Player</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <video id="player">
      <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL" />
    </video>
    <script src="https://player.tinyapps.download/v1/current/player.min.js"></script>
    <script>
      const options = {
        layoutControls: {
          fillToContainer: true,
          autoPlay: {
            waitInteraction: true,
          },
          playButtonShowing: true,
          playPauseAnimation: true,
          controlBar: {
            autoHide: true,
            autoHideTimeout: 3,
            animated: true,
          },
          menu: {
            audio: true,
            subtitles: true,
          },
          fullscreen: {
            iosNative: true,
          },
        },
        hls: {
          overrideNative: true,
        },
        debug: true,
      };

      const player = fluidPlayer('player', options);
    </script>
  </body>
</html>

Build Project

  1. install project dependencies: npm install
  2. run npm run build-dev

Changes

New options: | Option | Default | Description | | :--- | :--- | :--- | | Debug | false | Display debugging information in the console | Storage | { enabled: true, key: 'cvp', expiration: 30, shared: true, } | enabled: enables local storage for saving settings. key: prefix to be used for each setting. expiration: days that settings will last. shared: share settings between all instances. | | Audio | { language: 'auto' } | language: sets the default language (if available) | Subtitles | { active: false, language: 'auto', native: false, useVttjs: false, timestampMap: true, } | active: always use subtitles. native: the browser will handle subtitles or not. useVttjs: use a library to display subtitles. timestampMap: use in case of out-of-sync between subtitles and video (can work or not). language: sets the default language (if available) | Hls | { url: 'https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js', debug: false, overrideNative: false, config: (options) => { return options; }} | url: url of the hls.js library. debug: debug logs in console. overrideNative: use native hls or not. config: to configure it

Hls.js:

overrideNative: When is true, if the platform supports Media Source Extensions hls.js will take over HLS playback and will be possible to change the quality, audio and subtitles manually

Documentation

Some options and implementation details may still be documented on fluidplayer.