search

Joel2B / Custom-Video-Player

HTML5 Video Player, based on Fluid Player v3.0.4
https://appsdev.cyou/player/demo/
MIT License
14 stars 8 forks source link
dash hls html5 html5-player html5-video javascript javascript-library player player-video thumbnails-preview video video-player video-streaming

readme

Custom Video Player

HTML5 Video Player, based on Fluid Player v3.0.4

Desktop

image

Mobile

1 2

Difference with fluid player

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