kavin/Yotter
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add support for video hotkeys (#144)

Browse Source
This commit is contained in:
pluja 2020-11-16 11:35:28 +01:00
parent d2f3585b6a
commit a8b05edba1
2 changed files with 132 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/static/videojs.hotkeys.min.js vendored Normal file
View File

@ -0,0 +1,3 @@
/* videojs-hotkeys v0.2.27 - https://github.com/ctd1500/videojs-hotkeys */
!function(e,t){"undefined"!=typeof window&&window.videojs?t(window.videojs):"function"==typeof define&&define.amd?define("videojs-hotkeys",["video.js"],function(e){return t(e.default||e)}):"undefined"!=typeof module&&module.exports&&(module.exports=t(require("video.js")))}(0,function(e){"use strict";"undefined"!=typeof window&&(window.videojs_hotkeys={version:"0.2.27"});(e.registerPlugin||e.plugin)("hotkeys",function(t){function n(e){return"function"==typeof s?s(e):s}function o(e){null!=e&&"function"==typeof e.then&&e.then(null,function(e){})}var r=this,u=r.el(),l=document,i={volumeStep:.1,seekStep:5,enableMute:!0,enableVolumeScroll:!0,enableHoverScroll:!1,enableFullscreen:!0,enableNumbers:!0,enableJogStyle:!1,alwaysCaptureHotkeys:!1,captureDocumentHotkeys:!1,documentHotkeysFocusElementFilter:function(){return!1},enableModifiersForNumbers:!0,enableInactiveFocus:!0,skipInitialFocus:!1,playPauseKey:function(e){return 32===e.which||179===e.which},rewindKey:function(e){return 37===e.which||177===e.which},forwardKey:function(e){return 39===e.which||176===e.which},volumeUpKey:function(e){return 38===e.which},volumeDownKey:function(e){return 40===e.which},muteKey:function(e){return 77===e.which},fullscreenKey:function(e){return 70===e.which},customKeys:{}},c=e.mergeOptions||e.util.mergeOptions,a=(t=c(i,t||{})).volumeStep,s=t.seekStep,m=t.enableMute,y=t.enableVolumeScroll,f=t.enableHoverScroll,v=t.enableFullscreen,d=t.enableNumbers,p=t.enableJogStyle,b=t.alwaysCaptureHotkeys,h=t.captureDocumentHotkeys,w=t.documentHotkeysFocusElementFilter,k=t.enableModifiersForNumbers,S=t.enableInactiveFocus,K=t.skipInitialFocus,F=e.VERSION;u.hasAttribute("tabIndex")||u.setAttribute("tabIndex","-1"),u.style.outline="none",!b&&r.autoplay()||K||r.one("play",function(){u.focus()}),S&&r.on("userinactive",function(){var e=function(){clearTimeout(t)},t=setTimeout(function(){r.off("useractive",e);var t=l.activeElement,n=u.querySelector(".vjs-control-bar");t&&t.parentElement==n&&u.focus()},10);r.one("useractive",e)}),r.on("play",function(){var e=u.querySelector(".iframeblocker");e&&""===e.style.display&&(e.style.display="block",e.style.bottom="39px")});var q=function(e){var i,c,s=e.which,y=e.preventDefault.bind(e),f=r.duration();if(r.controls()){var S=l.activeElement;if(b||h&&w(S)||S==u||S==u.querySelector(".vjs-tech")||S==u.querySelector(".vjs-control-bar")||S==u.querySelector(".iframeblocker"))switch(g(e,r)){case 1:y(),(b||h)&&e.stopPropagation(),r.paused()?o(r.play()):r.pause();break;case 2:i=!r.paused(),y(),i&&r.pause(),(c=r.currentTime()-n(e))<=0&&(c=0),r.currentTime(c),i&&o(r.play());break;case 3:i=!r.paused(),y(),i&&r.pause(),(c=r.currentTime()+n(e))>=f&&(c=i?f-.001:f),r.currentTime(c),i&&o(r.play());break;case 5:y(),p?(c=r.currentTime()-1,r.currentTime()<=1&&(c=0),r.currentTime(c)):r.volume(r.volume()-a);break;case 4:y(),p?((c=r.currentTime()+1)>=f&&(c=f),r.currentTime(c)):r.volume(r.volume()+a);break;case 6:m&&r.muted(!r.muted());break;case 7:v&&(r.isFullscreen()?r.exitFullscreen():r.requestFullscreen());break;default:if((s>47&&s<59||s>95&&s<106)&&(k||!(e.metaKey||e.ctrlKey||e.altKey))&&d){var K=48;s>95&&(K=96);var F=s-K;y(),r.currentTime(r.duration()*F*.1)}for(var q in t.customKeys){var j=t.customKeys[q];j&&j.key&&j.handler&&j.key(e)&&(y(),j.handler(r,t,e))}}}},j=!1,T=u.querySelector(".vjs-volume-menu-button")||u.querySelector(".vjs-volume-panel");null!=T&&(T.onmouseover=function(){j=!0},T.onmouseout=function(){j=!1});var E=function(e){if(f)t=0;else var t=l.activeElement;if(r.controls()&&(b||t==u||t==u.querySelector(".vjs-tech")||t==u.querySelector(".iframeblocker")||t==u.querySelector(".vjs-control-bar")||j)&&y){e=window.event||e;var n=Math.max(-1,Math.min(1,e.wheelDelta||-e.detail));e.preventDefault(),1==n?r.volume(r.volume()+a):-1==n&&r.volume(r.volume()-a)}},g=function(e,n){return t.playPauseKey(e,n)?1:t.rewindKey(e,n)?2:t.forwardKey(e,n)?3:t.volumeUpKey(e,n)?4:t.volumeDownKey(e,n)?5:t.muteKey(e,n)?6:t.fullscreenKey(e,n)?7:void 0};return r.on("keydown",q),r.on("dblclick",function(e){if(null!=F&&F<="7.1.0"&&r.controls()){var t=e.relatedTarget||e.toElement||l.activeElement;t!=u&&t!=u.querySelector(".vjs-tech")&&t!=u.querySelector(".iframeblocker")||v&&(r.isFullscreen()?r.exitFullscreen():r.requestFullscreen())}}),r.on("mousewheel",E),r.on("DOMMouseScroll",E),h&&document.addEventListener("keydown",function(e){q(e)}),this})});
//# sourceMappingURL=videojs.hotkeys.min.js.map

138
app/templates/video.html
View File

@ -1,5 +1,6 @@
<head>
<link rel="stylesheet" type= "text/css" href="{{ url_for('static',filename='video-js.min.css') }}">
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
</head>
{% extends "base.html" %}
{% block content %}
@ -47,17 +48,20 @@
</div>
{%else%}
<div class="video-js-responsive-container vjs-hd">
<video-js autofocus class="video-js vjs-default-skin"
data-setup='{ "playbackRates": [0.5, 0.75, 1, 1.25,1.5, 1.75, 2] }'
<video-js id="video-1" class="video-js vjs-default-skin vjs-big-play-centered"
controls
data-setup='{ "playbackRates": [0.5, 1, 1.25, 1.5, 1.75, 2] }'
autofocus
width="1080"
controls
buffered
preload="none">
{% if config.isInstance %}
{% for source in info.formats %}
<source src="{{source.url}}" type="video/{{source.ext}}">
<source src="https://yotter.xyz{{source.url}}" type="video/{{source.ext}}">
{% endfor %}
{% endif %}
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video-js>
</div>
{%endif%}
@ -131,13 +135,129 @@
{% endfor %}
</div>
{%endif%}
<script src="{{ url_for('static',filename='video.min.js') }}"></script>
{% if info.live %}
<script src="{{ url_for('static',filename='videojs-http-streaming.min.js')}}"></script>
<script>
var player = videojs('live');
player.play();
<script src="{{ url_for('static',filename='videojs-http-streaming.min.js')}}"></script>
<script>
var player = videojs('live');
player.play();
</script>
{% endif %}
{%endif%}
<script src="{{ url_for('static',filename='videojs.hotkeys.min.js') }}"></script>
<script>
// initialize the plugin
videojs('video-1', {
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2]
});
videojs('video-1').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
enableMute: true,
enableFullscreen: true,
enableNumbers: false,
enableVolumeScroll: true,
enableHoverScroll: true,
// Mimic VLC seek behavior, and default to 5.
seekStep: function(e) {
if (e.ctrlKey && e.altKey) {
return 5*60;
} else if (e.ctrlKey) {
return 60;
} else if (e.altKey) {
return 10;
} else {
return 5;
}
},
// Enhance existing simple hotkey with a complex hotkey
fullscreenKey: function(e) {
// fullscreen with the F key or Ctrl+Enter
return ((e.which === 70) || (e.ctrlKey && e.which === 13));
},
// Custom Keys
customKeys: {
// Add new simple hotkey
simpleKey: {
key: function(e) {
// Toggle something with S Key
return (e.which === 83);
},
handler: function(player, options, e) {
// Example
if (player.paused()) {
player.play();
} else {
player.pause();
}
}
},
// Add new complex hotkey
complexKey: {
key: function(e) {
// Toggle something with CTRL + D Key
return (e.ctrlKey && e.which === 68);
},
handler: function(player, options, event) {
// Example
if (options.enableMute) {
player.muted(!player.muted());
}
}
},
// Override number keys example from https://github.com/ctd1500/videojs-hotkeys/pull/36
numbersKey: {
key: function(event) {
// Override number keys
return ((event.which > 47 && event.which < 59) || (event.which > 95 && event.which < 106));
},
handler: function(player, options, event) {
// Do not handle if enableModifiersForNumbers set to false and keys are Ctrl, Cmd or Alt
if (options.enableModifiersForNumbers || !(event.metaKey || event.ctrlKey || event.altKey)) {
var sub = 48;
if (event.which > 95) {
sub = 96;
}
var number = event.which - sub;
player.currentTime(player.duration() * number * 0.1);
}
}
},
emptyHotkey: {
// Empty
},
withoutKey: {
handler: function(player, options, event) {
console.log('withoutKey handler');
}
},
withoutHandler: {
key: function(e) {
return true;
}
},
malformedKey: {
key: function() {
console.log('I have a malformed customKey. The Key function must return a boolean.');
},
handler: function(player, options, event) {
//Empty
}
}
}
});
});
</script>
{% endblock %}