mirror of
				https://github.com/blakeblackshear/frigate.git
				synced 2025-10-27 10:52:11 +01:00 
			
		
		
		
	add playback rate adjustment and seek buttons
This commit is contained in:
		
							parent
							
								
									7b3abe330e
								
							
						
					
					
						commit
						40c4ca305e
					
				
							
								
								
									
										20
									
								
								web/package-lock.json
									
									
									
										generated
									
									
									
								
							
							
						
						
									
										20
									
								
								web/package-lock.json
									
									
									
										generated
									
									
									
								
							@ -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",
 | 
				
			||||||
 | 
				
			|||||||
@ -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",
 | 
				
			||||||
 | 
				
			|||||||
@ -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() {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user