add playback rate adjustment and seek buttons

This commit is contained in:
Jason Hunter 2021-06-03 19:38:05 -04:00 committed by Blake Blackshear
parent 7b3abe330e
commit 40c4ca305e
3 changed files with 29 additions and 1 deletions

20
web/package-lock.json generated
View File

@ -11942,6 +11942,26 @@
"video.js": "^6 || ^7" "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": { "videojs-vtt.js": {
"version": "0.15.3", "version": "0.15.3",
"resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz", "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",

View File

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

View File

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