bikegriffith / clappr-playback-rate-plugin Goto Github PK
View Code? Open in Web Editor NEWA plugin for the Clappr HTML5 video player that enables variable speed playback (0.5x, 1x, 2x, ...)
License: MIT License
A plugin for the Clappr HTML5 video player that enables variable speed playback (0.5x, 1x, 2x, ...)
License: MIT License
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);
}
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.
I got those error in console after using this plugin
Uncaught TypeError: Cannot read property 'UICorePlugin' of undefined
Uncaught ReferenceError: PlaybackRatePlugin is not defined
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
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
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
Hi,
I have the instance Clappr player and how listen on change rate event?
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 form .m3u8 HLS !
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
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.