Skip to content

Latest commit

 

History

History
120 lines (98 loc) · 3.71 KB

README.md

File metadata and controls

120 lines (98 loc) · 3.71 KB
Raw

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
  • 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://d3rlna7iyyu8wu.cloudfront.net/skip_armstrong/skip_armstrong_multi_language_subs.m3u8" type="application/x-mpegURL" />
    </video>
    <script src="https://appsdev.cyou/player/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

Everything you can do in fluidplayer you can do it here