ctd1500 / videojs-hotkeys Goto Github PK
View Code? Open in Web Editor NEWAdds more hotkey support to video.js
License: Apache License 2.0
Adds more hotkey support to video.js
License: Apache License 2.0
Hy!
I tryed your plugin in jsbin and unfortunetly doesn't work.
You can check this problem in here
Sorry again but I can't find out what is this eorr messange in the chrome console:
Uncaught TypeError: Cannot read property 'requestFullscreen' of nullinterju.html:19 (anonymous function)
Can you help me out please?
Bug is here:
http://neocsatblog.mblx.hu/embeds/interju.html
The issue seems to be quite simple; video.js changed how they expose their lib at some point (?) so the code
import videojs from 'video.js';
require('videojs-hotkeys');
would yield Uncaught TypeError: (e.registerPlugin || e.plugin) is not a function
;
It seems that this is because var registerPlugin = videojs.registerPlugin || videojs.plugin;
in videojs-hotkeys/videojs.hotkeys.js evaluates into undefined because videojs
object there has .default
property now that is supposed to be called instead.
A code like
var vjs = videojs.default || videojs;
var registerPlugin = vjs.registerPlugin || vjs.plugin;
would fix the issue but I'm not sure if It fixes the real problem instead of "symptoms"
Test issue
Hi, I recently installed v0.2.27 of videojs-hotkeys via npm and I also have v7.7.5 of videojs installed via npm as well (and updated it to 7.11.0 as I was writing this issue). Our team is using video.js as a streaming player in a React project and we are looking to add hotkey support for fullscreen. I stumbled upon this project, which has that and a bunch of other stuff like volume slider and mute hotkey OOTB, all of which would be great to have in our app. One problem I seem to be running into though is an issue where if I enable captureDocumentHotkeys
and then press F in Firefox while focusing on the video player, it will throw an Uncaught (in promise) undefined
exception, with the following stacktrace:
errorHandler video.es.js:23691
errorHandler self-hosted:1161
func video.es.js:2084
dispatcher video.es.js:1898
(Async: EventListener.handleEvent)
on video.es.js:1918
one video.es.js:2089
listen video.es.js:2666
one video.es.js:2780
requestFullscreen video.es.js:23695
requestFullscreen video.es.js:23678
q videojs.hotkeys.min.js:2
q self-hosted:1161
dispatcher video.es.js:1898
(Async: EventListener.handleEvent)
on video.es.js:1918
listen video.es.js:2666
on video.es.js:2716
Player video.es.js:21373
videojs$1 video.es.js:26730
Streaming Streaming.tsx:261 (this is the line where videojs is initialized)
I threw in a console.log inside the documentHotkeysFocusElementFilter
callback I passed into hotkeys options and I notice that two logs are printed when I press F while focused on video player, but when I'm not focused on the element, only one log is printed.
Also, in Chrome, I get the following message alongside the error: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
The following is how I initialized the hotkeys plugin if that helps:
player.ready(function() {
this.hotkeys({
enableNumbers: false,
captureDocumentHotkeys: true,
documentHotkeysFocusElementFilter: e => e.tagName.toLowerCase() === "body",
rewindKey: () => false,
forwardKey: () => false,
playPauseKey: () => false,
});
});
Let me know if there's anything here that I need to change, thanks.
(also, as a sidenote, mute hotkey does not work for me in Chrome)
Just a heads up that the latest release isn't currently available on npm.
Thanks and keep up the good work!
I have a custom button in the ControlBar, it would be nice if I could trigger a click on that with a custom key.
The 'dblclick' event on this line https://github.com/ctd1500/videojs-hotkeys/blob/master/videojs.hotkeys.js#L189 is not fired when using videojs with a flash player (such as with Brightcove's Brightcove Player with HLS) on Chrome.
Works as intended on Firefox and newer versions of IE.
example.html doesn't work.
The way it works before does not work any more, we need updates.
Thank you again for the plug! Is it possible to reduce or increase the size of the subtitles using the keys - +
on keyboard?
It would be a very useful option ..!
Hi! There is a problem with returning focus after changing something using control-bar submenu. I have a few thoughts on hot to fix this, but I decided to discuss first.
Problem
Plugin trying to return focus to <video>
after user interaction with control-bar. This done by determining either active element is inside control-bar or not. Problem that after clicking any submenu focus obviously goes to that submenu. Then when menu fades away videojs wipes it out of DOM and focus goes to <body>
so plugin has no chance to determine later did user interacted with control-bar or not. Focus stays at <body>
and hotkeys doesn't work =(
Solution 1 (wrong)
Turn on alwaysCaptureHotkeys
and give up accessibility
Solution 2 (ugly & non reliable)
add something like this to return focus manually:
player.on 'ratechange', => player.el().focus()
player.on 'resolutionchange', => player.el().focus()
But resolutionchange
here is a custom event came from resolution change plugin. Who knows how many plugins can be used
Solution 3
???
Plugin will work if i click the video before. how to resolve it?
Hi! Help council ! Updated plugin hotkeys. My Site : http:// template unchanged, but hotkeys are not working again. Self Hosted in main.tpl :
script src="//
initialization script in end of file libs.js :
Hi,
You can change this code:
// Toggle Mute with the M key
case 'mute':
if (enableMute) {
if (player.muted()) {
player.muted(false);
} else {
player.muted(true);
}
}
break;
Reduced code:
if (enableMute) {
player.muted(!player.muted());
}
Now the Right and Left Arrow keys only used to seek the video forwards and backwards x seconds.
It would be nice if an option could enable chapter navigation. It could fallback to seek, or do nothing if no chapters track present.
(Heads up for the chapter nav: Chapter 1st's endTime is not always Chapter 2nd's startTime)
BTW, nice work!
Normally hotkey works well.
Except below case.
How to reproduce bug
userinactive
state.document.activeElement
is changed to document.body
.player.on('userinactive', function() {
pEl.focus();
});
Maybe, this could be a solution.
Is there a way to enable disable de plugin functions?
Because i want to disable it on arrow down and enable on arrow up.
And to enable and disable on my web app when i'm in another view.
Hi, thanks for the great plugin!
We're getting the exception in the title on Chrome. It's very easy to reproduce - just play a video and hold the "right" arrow key on your keyboard and it happens. Google has a bunch of documentation written about that. The problem is that the call to play
here is asynchronous and the check whether the video is playing that is done here returns true
before the play
call is actually finished and then the pause
method call causes that exception. play
returns a promise in which it is safe to call pause
.
I'm not sure whether this is a bug in Chrome/Video.js/Video.js-Hotkeys, that's probably for you to say.
Thanks.
videojs-hotkeys is using videojs.plugin() instead of videojs.registerPlugin(). plugin() is deprecated and may be removed in future versions of videojs, so it would be nice to rewrite it to registerPlugin().
I've been implementing this plugin for our player and noticed that it does not play nicely with ads/ima integrations. I was able to get around this by using the key override functions in the plugin config. This is not the most graceful way to achieve this however. With the above in mind I had a few questions:
The reason I am asking is because we may be able to provide some PRs for the things listed above since we have had to tackle them internally.
Tried the plugin but get:
videojs.hotkeys.min.js:354 Uncaught TypeError: Cannot read property 'plugin' of undefined
at videojs.hotkeys.js:354
at videojs.hotkeys.js:15
at videojs.hotkeys.js:18
Line 354:
videojs.plugin('hotkeys', hotkeys);
?
As I can test, plugin didn't work in new version of Chrome (69) on MacOS Mojave.
It is strange, but in "private tab" of MacOS Chrome it (plugin) works.
But, as I suppose, plugin didn't work on Windows in Chrome (I received a letter from a user and I believe he uses Windows).
In new Safari 12 it works.
Personally I tested on Windows 10 in Chrome, and for me plugin works.
Browser using Windows version of chromium kernel, breaked when the player has focus.
https://jsfiddle.net/Kagaku_Accelerator/fz6m9xbw/11/
Video is paused
The playback state bounce
It's because .vjs-text-track-display
has pointer-events: none
Hi, I just realized that when the video player is focused and I use my mousewheel, it changes the video's volume and the page stops scrolling, I tried to change it by overriding the volumeUpKey
but look's like it's only executed for arrow keys
Any ideas of how can I avoid this behaviour ?
Thanks in advance, cheers!
Adding tabindex on player element makes the player a lot less responsive (lots of drop frame) unless outline is specifically deactivated in CSS.
The problem is specifically on chrome. Confirmed on Mac and Windows 10. Edge, Safari and Firefox doesn't seem to have issues with it.
My fix for my use case is this:
:focus {outline:none;}
Hi,
I use your plugin inside a require.js module application so I need to "requirerize" the plugin.
I think will be good to UMD this plugin. UMD: http://davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/
You can easily solve this problema wraping your code in:
;(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define([], factory.bind(this, root));
} else if(typeof module !== 'undefined' && module.exports) {
module.exports = factory(root);
} else {
root.videojsMediaSources = factory(root);
}
//Plugin starts here
(function(window, videojs) {
'use strict';
window['videojs_hotkeys'] = { version: "0.2.8" };
....
// Plugin ends
videojs.plugin('hotkeys', hotkeys);
})(window, window.videojs);
});
In UMD we can use the plugin as always plus AMD, CommonJS, and UMD.
Regards
Thank you Team for the plugin.
Guys, can anyone here give an example of how to make use of videojs-hotkeys in Angular.
When video paused and page is scrolled where the player is not visible, code for setting focus to the controlbar in userinactive event cause page to scroll up to the video again.
I noticed in your ReadMe page and source code that you didn't have a Picture-In-Picture option.
And I'm a sucker for that accessibility.
In my program, I was sort of able to make one for myself...
customKeys: {
smallPlayer: {
key: function(event) {
return (event.which === 73);
},
handler: function(player, options, event) {
if (player.isInPictureInPicture()) {
player.exitPictureInPicture();
} else {
player.requestPictureInPicture();
}
}
}
}
I was hoping that you could add a PictureInPicture option in your library to make life easier for those like me.
Good Night, im using flexslider 2 to show video between sliders, and hotkeys script dont work between them, can anyone help me?
Hi there,
I have an issue where the player gets focus when alwaysCaptureHotkeys
is set to false
and autoplay is active. This means that the page will jump to the player on pageload if autoplay is active.
This happens because we handle autoplay in a different way in order to do certain detections before we 'autoplay' the video. In short this causes autoplay to be set to false when the player gets initialized, while still starting the video, and therefor it passes the following if statement
of the hotkeys code:
if (alwaysCaptureHotkeys || !player.autoplay()) {
player.one('play', function() {
pEl.focus(); // Fixes the .vjs-big-play-button handing focus back to body instead of the player
});
}
Is it possible to get an option created where we can set the player to never get focus? Something like neverAllowFocus
for example. which will ignore this whole if statement
if set to true
?
Thanks in advance
This plagin dont work/
Inserted it anywhere already. Works nothing. Any plugin for this player not the worker.
Enable the plugin
Add hotkeys to your Videojs ready function.
videojs (' vidId ').ready (function () {
this.hotkeys ({
volumeStep: 0.1,
seekStep: 5,
enableMute: true,
enableFullscreen: true
});
});
https://github.com/ctd1500/videojs-hotkeys/blob/master/videojs.hotkeys.js#L43
Obviously this breaks anything that doesn't support it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const
this.hotkeys is not a function ---why?
Hi, today I just discovered a bug with this hotkeys plugin for video.js
If you play a video, then pause and then scroll down, after 3-4 seconds you will be automatically scrolled up
I'm using:
// package.json
{
"video.js": "^5.17.0",
"videojs-hotkeys": "^0.2.17",
}
I'm wondering if anyone else has experienced this behavior.
Hi,
I have made a complete refactor of the plugin. I have to be able to add new shortcuts in the plugin and some of them have a key combination like ctrl + enter, ctrl + D,...
You can checkout at
https://github.com/ReNDeZOwnler/videojs-hotkeys/blob/keyCombination/videojs.hotkeys.js
Give me your feedback pls
On a page that triggeres multiple videos, the hotkeys work perfectly on the first video. However spacebar only works EVERY OTHER TIME. How do you force the SPACE hotkey to work reliably?
Spacebar always plays/pauses the video, regardless of focus.
Spacebar only works every other time.
Hi!, Need help for implement your plugin with videojs 4.12
Demo:
http://xaphanentertainment.com/pop-in/player-test/
not working with key board shortcuts.. can anyone looked and tell me whats wrong? in my code
Kindly regards!,
Sam
Hello! Release 0.2.25 does not work for player versions such as 6.13.0, 7.3.0, 7.5.0
Only in the browser firefox works. What could be the reason ? The script is connected and everything is written without changes. On the version of the player 5.20.5 works fine! Thanks in advance!
$(document).ready(function() {
videojs('player1').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableMute: true,
enableVolumeScroll: true,
enableFullscreen: true,
enableNumbers: true,
});
});
});
Hi,
i enabled hotkeys plugin with
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableModifiersForNumbers: false,
alwaysCaptureHotkeys: true
});
When i scroll mouse wheel on the video, before clicking on the play icon, page scroll should work.
But seems the page is there in the same place.
When I removed the hotkeys, page scroll working fine on the video.
This particular line disables hotkeys: https://github.com/ctd1500/videojs-hotkeys/blob/master/videojs.hotkeys.js#L71
The comment above this section suggests an option to disable this behaviour, but there is no option available.
The comment suggests disabling is possible if in jogStyle mode, but this does not seem like the correct name for such a control. Perhaps a new option is required?
One particular example:
User clicks fullscreen button, then presses spacebar to pause.
Expected behaviour:
Video goes fullscreen, then is paused.
Actual behaviour:
Video goes fullscreen, then exits fullscreen.
I am able to submit a PR which fixes the issue if required.
Demo: https://blacktrash.org/test/videojs/hotkeys-62.html
Tested with Mac Safari 12.0.3
Note that double click to fullscreen works without the plugin, at least in videojs 7.x - so the duplicate code may be the problem.
VIDEOJS: WARN: videojs.mergeOptions is deprecated and will be removed in 9.0; please use videojs.obj.merge instead.
// Use built-in merge function
var mergeOptions = 'obj' in videojs
? videojs.obj.merge // Video.js > v9
: (videojs.mergeOptions || // Video.js >= v5
videojs.util.mergeOptions // Video.js <= v4
);
OR
Use videojs.obj.merge
directly (remove the support of Video.js < v9)
Hi,
I tested many versions of videojs and noticed that the alwaysCaptureHotkeys: true option does not work with any version of videojs above 7.5.4
can anyone confirm this?
I think this commit may be related to this
videojs/video.js@79eadac
I just cannot use any function of this plugin with flash in IE11 while it works with flash in firefox.
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.