bikegriffith/clappr-playback-rate-plugin

A plugin for the Clappr HTML5 video player that enables variable speed playback (0.5x, 1x, 2x, ...)

Hi there 👋

• 😄 I work on the Design Team as an Engineer @ Stripe.
• 🔐 Though I'm still developing every day, you probably won't see me as much on github.com anymore 🥹
• 🔭 I love tinkering with all things on the web, embedded devices, and anything that goes fast (code, rockets, RC, bicycles, you name it)
• 📫 Reach me via email, [email protected]

clappr-playback-rate-plugin's Issues

Is this maintained?

Hello,
I tried to install the plugin, but it does not seem to work with the latest clappr version. There have been no commits lately, so I wanted to ask if this plugin is maintained or accepting PR? Thanks

Wrong selector for changing rate

Hello, I found a small bug your plugin.
When using an audioOnly media element, the plugin doesn't change the playback rate. This is due to this jQuery selector in line 122 that looks only for video elements even when audioOnly is set to true. A simple check for this flag that uses the right selector should be enough, since I can confirm replacing video with audio returns the correct element.

defaultValue inoperative ？

defaultValue inoperative form .m3u8 HLS ！

Incompatible with clappr 0.3.9

I've tried to get this plugin to work with clappr 0.3.9, and it just failed silently.

After some investigation, I was able to solve it by making this change to the plugin source:

OLD:

  bindEvents() {
    this.listenTo(this.core.mediaControl, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.reload);
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideContextMenu);
    this.listenTo(this.core.mediaControl, PlaybackRatePlugin.MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
  }

  unBindEvents() {
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
  }

NEW:

  bindEvents() {
    this.listenTo(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED, this.reload);
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_RENDERED, this.render);
    this.listenTo(this.core.mediaControl, Events.MEDIACONTROL_HIDE, this.hideContextMenu);
    this.listenTo(this.core.mediaControl, PlaybackRatePlugin.MEDIACONTROL_PLAYBACKRATE, this.updatePlaybackRate);
  }

  unBindEvents() {
    this.stopListening(this.core, Events.CORE_ACTIVE_CONTAINER_CHANGED);
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_CONTAINERCHANGED);
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_RENDERED);
    this.stopListening(this.core.mediaControl, Events.MEDIACONTROL_HIDE);
  }

Reference Error with latest clappr build

I'm currently in the process of integrating Clappr and came across this plugin which we'd like to add.

I've installed version 0.2.0 with version 0.2.64 of Clappr with NPM and integrated the plugin into a React app following the docs.

The error I see on page load is: ReferenceError: external undefined plugin on core array

I searched around and saw an issue for another Clappr plugin from about a year back (clappr/clappr-level-selector-plugin#7). Could a recent Clappr version have broken the plugin?

Please let me know if there's any other info I can provide. Thanks!

Nate

Styling?

Why is it so ugly looking?
How to make it look like on the demo screenshot?
I mean, this is how it look for me

Should be require 'clappr' instead of 'Clappr'

https://github.com/bikegriffith/clappr-playback-rate-plugin/blob/master/dist/clappr-playback-rate-plugin.js#L5

Webpack warnings while compiling.
 ./node_modules/Clappr/dist/clappr.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* xxx/node_modules/Clappr/dist/clappr.js
    Used by 1 module(s), i. e.
    xxx/node_modules/clappr-playback-rate-plugin/dist/clappr-playback-rate-plugin.min.js
* xxx/node_modules/clappr/dist/clappr.js
    Used by 1 module(s), i. e.
    xxx/node_modules/babel-loader/lib/index.js??ref--1!xxx/app/javascript/utils/clappr.js

How listen on change rate?

Hi,
I have the instance Clappr player and how listen on change rate event?

Chrome Android

Hello, I'm trying to run this plugin and works ok on Desktop web browsers, but currently I have a problem trying on Android. I'm trying on several devices using Chrome (Version 51.0.2704.81 and olders), the menu is showing perfectly but when I try change the plaback rate don't do anything.

By the way I recommend publish a CDN to be easier the test on cdn.clappr.io

Cheers

Clappr being bundled twice

I'm trying checking my production source map (source-map-explorer) and find that clappr is bundle twice.

How can I solve this?

PlaybackRatePlugin is not defined

Tried Both way to call the plugin. But getting the same error every time.

plugins: {
             'core' : [PlaybackRatePlugin]
	},
plugins: {
             core : [PlaybackRatePlugin]
	},

Uncaught ReferenceError: PlaybackRatePlugin is not defined
at window.onload ((index):32).

After that i take code and compile it on my local machine. Files are generated, but getting the same error.

Uncaught TypeError: Cannot read property 'UICorePlugin' of undefined

I got those error in console after using this plugin

Uncaught TypeError: Cannot read property 'UICorePlugin' of undefined
Uncaught ReferenceError: PlaybackRatePlugin is not defined

API call to set rate on the fly

Hi, it is not an issue but more of a question. Let's say you have a player already playing, what calls do you need to perform to change the rate on-the-fly.

I have my player instance, but from there I do not know what and how to call so that the UI also updates properly such as becoming selected on 2x when 2x is chosen.

Something like:

player.setPlaybackRate(2); // will trigger 2x to be selected in the UI plus change the rate to 2

More playback rates

Could you add playback rates? (like VLC)

0.02x
0.03x
0.06x
0.12x
0.25x
0.33x
0.50x
0.67x
1.00x (Normal)
1.50x
2.00x
3.00x
4.00x
8.00x
16.00x
32.00x
64.00x