add playback rate adjustment and seek buttons

web/package-lock.json

@@ -11942,6 +11942,26 @@
         "video.js": "^6 || ^7"
       }
     },
+    "videojs-seek-buttons": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-seek-buttons/-/videojs-seek-buttons-2.0.0.tgz",
+      "integrity": "sha512-fSq2COvwTT5OwD5urc3E+ktQRwdjptXNaeuv1Tld2yfoV1ep9Am9gE/O07ADgHJVedFatVUXnifTh6wlUWSyTA==",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+          "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "^0.11.10"
+          }
+        }
+      }
+    },
     "videojs-vtt.js": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",

web/package.json

@@ -18,7 +18,8 @@
     "preact-async-route": "^2.2.1",
     "preact-router": "^3.2.1",
     "video.js": "^7.11.8",
-    "videojs-playlist": "^4.3.1"
+    "videojs-playlist": "^4.3.1",
+    "videojs-seek-buttons": "^2.0.0"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.12.13",

web/src/components/VideoPlayer.jsx

@@ -1,10 +1,13 @@
 import { h, Component } from 'preact';
 import videojs from 'video.js';
 import 'videojs-playlist';
+import 'videojs-seek-buttons';
 import 'video.js/dist/video-js.css';
+import 'videojs-seek-buttons/dist/videojs-seek-buttons.css';
 
 const defaultOptions = {
   controls: true,
+  playbackRates: [0.5, 1, 2, 4, 8],
   fluid: true,
 };
 
@@ -18,6 +21,10 @@ export default class VideoPlayer extends Component {
     this.player = videojs(this.videoNode, videoJsOptions, function onPlayerReady() {
       onReady(this);
     });
+    this.player.seekButtons({
+      forward: 30,
+      back: 15,
+    });
   }
 
   componentWillUnmount() {