mirror of
https://github.com/DanielnetoDotCom/YouPHPTube
synced 2025-10-03 01:39:24 +02:00
146 lines
4 KiB
HTML
146 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Video.js Hotkeys</title>
|
|
<link href="https://vjs.zencdn.net/8.17.4/video-js.css" rel="stylesheet" />
|
|
<script src="https://vjs.zencdn.net/8.17.4/video.min.js"></script>
|
|
<style>
|
|
.video-js .vjs-menu-button-inline {
|
|
width: 12em;
|
|
}
|
|
|
|
.vjs-menu-button-inline .vjs-menu {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>You can see the Video.js Hotkeys plugin in use below. Look at the source to see how to use it with your own videos.</div>
|
|
|
|
<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" height="300" width="600" controls data-setup="{}">
|
|
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
|
|
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
|
|
<source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg" />
|
|
<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>
|
|
|
|
<script src="videojs.hotkeys.js"></script>
|
|
<script>
|
|
// initialize the plugin
|
|
videojs("video1").ready(function () {
|
|
this.hotkeys({
|
|
volumeStep: 0.1,
|
|
seekStep: 5,
|
|
enableMute: true,
|
|
enableFullscreen: true,
|
|
enableNumbers: false,
|
|
enableVolumeScroll: true,
|
|
enableHoverScroll: true,
|
|
captureDocumentHotkeys: true,
|
|
documentHotkeysFocusElementFilter: (e) => e.tagName.toLowerCase() === "body",
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|