clappr / clappr-plugins Goto Github PK

View Code? Open in Web Editor NEW

31.0 18.0 17.0 48.6 MB

Main plugins for the Clappr project

License: BSD 3-Clause "New" or "Revised" License

JavaScript 79.77% Shell 1.18% HTML 5.23% CSS 1.31% SCSS 12.51%

clappr plugins mediacontrol captions controls clappr-plugins dvr analytics poster timer

clappr-plugins's Introduction

Huge changes in the latest version. See 0.4.0 version changelog for more information

Clappr Monorepo

Look for Clappr and related packages under the /packages directory. Applications like the clappr.io documentation site are under the /apps directory.

Documentation

Visit https://clappr.github.io to view the full documentation.

Run the Development Server

Run yarn install to install all dependencies
Run yarn dev will start the development server.
Visit http://localhost:8080 to view your application.

clappr-plugins's People

Contributors

Stargazers

Watchers

Forkers

karlprieb sumonst21 ancokplayer bubblesphere kslimani npsolution bp2008 enicad akari guzz oskarl2 nastyphoenix surfndez ordyakov patrickwaweru eternalpatience

clappr-plugins's Issues

Import trouble

I installed @clappr/plugins in my MediaControl extention project built with webpack, then import MediaControl like that:
import { MediaControl } from '@clappr/plugins'
Please tell me why the project does not start after this?

ERROR in ./node_modules/@clappr/plugins/dist/clappr-plugins.esm.js
Module not found: Error: Can't resolve '@clappr/core' in '/Users/aleksandr/projects/clappr-styling/node_modules/@clappr/plugins/dist'
@ ./node_modules/@clappr/plugins/dist/clappr-plugins.esm.js 1:0-152

dvr-controls doesn't correctly apply sometimes

When I start my dvr enabled stream (X-PLAYLIST-TYPE: EVENT tag), sometimes after the player is fully loaded, the media-controls are missing dvr-controls (also missing "live" and "dvr" tags on the container).

Weirdly enough, if you refresh the page, when I recently started the stream, the amount of times the bug appears is like 80%. And after the stream is getting bigger and bigger playlist size (the max playlist size is 240 minutes), the bug appears less often (after an hour, its like 1/8th of the time).

I'm not so sure what it's causing this bug but I will try to explain my conditions the best way possible.
I use latest version from a cdn, and I build the player from script as usual:

    var player = new Clappr.Player({

        source: "<?php echo getMediaLink();?>stream_high.m3u8",
        parentId: "#player",
        width: '100%',
        height: '100%',
        plugins: [ClapprMarkersPlugin],
        markersPlugin: {
            markers: [
            ],
            tooltipBottomMargin: 17 // optional
        }
    });
    player.getPlugin('click_to_pause').disable();
    player.play();

(bug still apears with no extra plugins)

And this is what it looks like when dvr controls don't load properly (and never do after, even when seeking):

(the image is live content, I seeked back, but if I didn't it would be the same but with the current time on the right, blue seek bar, and nothing stating that its live content)

If you run player.getPlugin('dvr_controls').settingsUpdate(); the dvr-controls appear again, the container correctly tags "live" and "dvr" and the plugin starts to work as intended again.

Why is it not loading correctly sometimes? Could it be a core problem when the pluging is loading? I'm trying to slowly read more code from these plugins to figure it out. I will try my best to help out.
As a temporary fix I'm using setTimeout(function(){ player.getPlugin('dvr_controls').settingsUpdate(); }, 1000); and most users shouldn't even notice it.

'media-control-notransition' class works wrong

This ussue duplicates one from clappr repo

Starting with commit 41b2897, the MediaControl setSeekPercentage method does it wrong removing the 'media-control-notransion' class.
This negatively affects the experience of dragging the seek-bar scrubber.
Adding this class in the rendering method is also useless.

questions: about ClapprPlugins.Plugins

I see that, currently, ClapprPlugins.Plugins is an object.

The current Clappr Player plugins option expects an array. Does that mean it will accept an object instead in the future ?

For example, current workaround in my test i use is :

// Assuming Clappr is @clappr core 0.4.x
var player = new Clappr.Player({
  // ....
  plugins: Object.values(ClapprPlugins.Plugins)
});

Or does the exposed ClapprPlugins.Plugins serve another purpose ? (or will be another usage methodology ?)

Or maybe it should be an Array ? :

// Assuming Clappr is @clappr core 0.4.x
var player = new Clappr.Player({
  // ....
  plugins: ClapprPlugins.Plugins, // Assuming const Plugins = [ClickToPause, .... ]
});

Can I use Rate and LevelSelector together

Hello
I try to use the two plugins together on the same video but i can't.
My code is :

<!DOCTYPE html>
<html>
  <head>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@clappr/player@latest/dist/clappr.min.js"></script>    
        <script type="text/javascript" src="//cdn.jsdelivr.net/gh/clappr/clappr-level-selector-plugin@latest/dist/level-selector.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr-playback-rate-plugin@latest/lib/clappr-playback-rate-plugin.min.js"></script>
  </head>

  <body>

  <div id="player">Format M3U8 with Clappr Plugin Level Selector</div>
		<script>
			var player = new Clappr.Player({
                source: "master.m3u8", parentId: "#player", height: "180px", width: "320px",
                plugins: [LevelSelector],
            });
		</script>
        <br /><hr>
  <div id="player2">Format M3U8 with Clappr Plugin Rate Selector</div>
		<script>
			var player2 = new Clappr.Player({
                source: "master.m3u8", parentId: "#player2", height: "180px", width: "320px",
                plugins: [PlaybackRatePlugin],
            });
		</script>
        <br /><hr>
  <div id="player3">Format M3U8 with Clappr Plugin Level Selector & Rate</div>
		<script>
			var player3 = new Clappr.Player({
                source: "master.m3u8", parentId: "#player3", height: "180px", width: "320px",
                plugins: [PlaybackRatePlugin],
                plugins: [LevelSelector]
            });
		</script>

    </body>
</html>

I tried plugins: [PlaybackRatePlugin], [LevelSelector]
plugins: [ [PlaybackRatePlugin], [LevelSelector],] ....
I think I tried all the combinations but I have two results
1 Only one plugin is display.
2 The Video doesn't appears.

I tried to change the order of the plugins but the result is the same.
My player and player2 works fine.

It is no an issue I'm sure I missunderstood something but I don't find where to ask my question

Best Regards

clappr / clappr-plugins Goto Github PK

clappr-plugins's Introduction

Huge changes in the latest version. See 0.4.0 version changelog for more information

Clappr Monorepo

Documentation

Run the Development Server

clappr-plugins's People

Contributors

Stargazers

Watchers

Forkers

clappr-plugins's Issues

Import trouble

dvr-controls doesn't correctly apply sometimes

'media-control-notransition' class works wrong

questions: about ClapprPlugins.Plugins

Can I use Rate and LevelSelector together

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent