andrefilimono / clappr-flvjs-playback Goto Github PK

View Code? Open in Web Editor NEW

14.0 1.0 5.0 1.14 MB

A flv playback based on flv.js for Clappr

License: MIT License

JavaScript 71.52% HTML 28.48%

flv flsjs clappr playback player plugin

clappr-flvjs-playback's Introduction

FLVJSPlayback

A clappr FLV playback based on flv.js

Usage

Add Clappr, flv.js and the plugin scripts to your HTML:

<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>
  <!--
  THIS PLUGIN IS ALSO COMPATIBLE WITH CLAPPR-CORE
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/core@latest/dist/clappr-core.min.js"></script>
  --->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/flv.js@latest/dist/flv.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-flvjs-playback@latest/dist/clappr-flvjs-playback.min.js"></script>
</head>

Then just add FLVJSPlayback into the list of plugins of your player instance, and the options for the plugin go in the flvjsConfig property as shown below.

var player = new Clappr.Player({
  source: "http://your.flv.video",
  mimeType: 'video/flv',
  plugins: [ FLVJSPlayback ],
  playback: {
    flvjsConfig: {
      enableLogging: true, // default is "false"
      // Params from flv.js
    }
  }
});

Configuration

The parameters of flvjsConfig are completely equal to the parameters of flv.js

enableLogging - enable or disable flv.js logging

Development

Install dependencies:

yarn install

Start HTTP dev server http://localhost:8080:

yarn start

Upgrade packages to latest version:

yarn upgrade --latest

Build

Minified version of plugin will be placed at dist/clappr-flvjs-playback.min.js

yarn build

Lint

Run linter:

yarn lint

Fix lint errors:

yarn lint:fix

Issues

Feel free to submit issues and enhancement requests.

clappr-flvjs-playback's People

Contributors

Stargazers

Watchers

Forkers

ranst91 danfragoso scorum xhmc627a

clappr-flvjs-playback's Issues

How to set buffer time

Hi,

Am getting 3-4 seconds latency. hope we can reduce the latency once we can set the "BufferTime"

Please help me to configure the same

The live stream style is not using the dvr-control style of clappr

Play hls live stream in clappr,control style(dvr-control):
play/stop live volume fullscreen
use clappr-flvjs-playback,control style:
play/stop 00:00:01|--:-- volume fullscreen

Background color suggestion for Issue header

.gh-header { background-color: #1a2632; }

Original

Modifyed

Uncaught TypeError: Cannot read property 'type' of undefined

@andrefilimono Hey there, I've encountered an error like below

Uncaught TypeError: Cannot read property 'type' of undefined
    at clappr.min.js:1
    at Array.reduce (<anonymous>)
    at M.groupPluginsByType (clappr.min.js:1)
    at M.addExternalPlugins (clappr.min.js:1)
    at new M (clappr.min.js:1)
    at E.get (clappr.min.js:1)
    at f.get (clappr.min.js:1)
    at f.create (clappr.min.js:1)
    at E.attachTo (clappr.min.js:1)
    at E.setParentId (clappr.min.js:1)

I've found out that this error occurs in the latest versions of Clappr (0.3.13) and your plugin (2.0.0). Upon downgrade the versions of Clappr to 0.3.12 and your plugin to 1.1.1, the error does not occurring.

Cannot display clappr's `error_screen` event when video link 404

Hi,
In clappr, you will get a mask layer when playing hls or mp4 if link is error，
But using the plugin, there is no display, just show it in the console。

<div class="player-error-screen" data-error-screen="" style="">
<div class="player-error-screen__content" data-error-screen="">
<div class="player-error-screen__title" data-error-screen="">Could not play video.</div>
<div class="player-error-screen__message" data-error-screen="">There was a problem trying to load the video.</div>
<div class="player-error-screen__code" data-error-screen="">Error code: html5_video:1</div>
<div class="player-error-screen__reload" data-error-screen="">
</div>

Clappr player exits fullscreen on PLAYER_ENDED

The clappr player exits fullscreen whenever the playback of the flv source ends (so when PLAYER_ENDED is emitted). This isn't the case with any other sources I have tried (hls, mp4).

Subtitle Support

Hello there. Nice project, thank you. Is it possible to add a subtitle file to this video player?

not working in ie10/11

flvjs-playback plugin not working in ie10/11

Disbale flv plugin logs

The plug in seems to log everything it does and my console is heavily spammed with things like:
"[MSEController] > Received Initialization Segment, mimeType: video/mp4;codecs=avc1.42801f"
and similar.
Since the only configuration stated is this table: https://github.com/Bilibili/flv.js/blob/master/docs/api.md#config
I couldn't locate where can I turn this off.

Any help?

Text Color Suggestion for User Dropdown

.header-nav-current-user .user-profile-link { color: #bdbdbd; }