add playback rate adjustment and seek buttons

LordNex · Jun 5, 2021 · 40c4ca3 · 40c4ca3
1 parent 7b3abe3
commit 40c4ca3
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 1 deletion.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/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",

diff --git a/web/src/components/VideoPlayer.jsx b/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() {