Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-10-31 16:43:22 +01:00
parent 1cbcb08d89
commit 78760c9edf

View File

@ -31,7 +31,7 @@ To include it in the existing project, only a few steps were required: copy the
</video>
```
So we have our training video embedded now, but we have to hit play ourselfes and it does not adjust its playback speed according to our training yet. So first, let's find out if we can start/pause/stop the video with our exercise. To do that, first I have to find out how to control the video.js from code. Then I have to find something in our training data, to figure out if training has startet, paused or stopped.
For the first step, I figured out, to trigger play/pause/stop I should use the value for "Instantaneous Pace". It is 0 before training has started, is also 0 when paused and 0 too when training has stopped. So a good starting point, but to figure out the difference for pause/stop, I will need to have a closer look later.
For the first step, I figured out, to trigger play/pause/stop I should use the value for "Instantaneous Pace". It is 0 before training has started, is also 0 when paused and 0 too when training has stopped. I just modified the following code:
```
if (typeof data['Instantaneous Pace'] != "undefined") {
document.querySelector('#pace').textContent = data['Instantaneous Pace'];
@ -44,6 +44,7 @@ if (typeof data['Instantaneous Pace'] != "undefined") {
}
}
```
It works! So definitely a good starting point, but to figure out the difference for pause/stop, I will need to have a closer look later.
Now that we control the video basically via code, we want to turn off (either hide, like the picture-in-picture button) or disable (like the progress bar) user controls for the video playback. This is easily done by adding this to the javascript code in our index.html.
```
const player = videojs('rowing_video');
@ -55,11 +56,18 @@ player.controlBar.pictureInPictureToggle.dispose();
player.controlBar.playbackRateMenuButton.disable();
```
But that does not prevent play/pause when I click on the video, so I had to add another piece of code to prevent users from controling the video playback.
```
```
But that does not prevent play/pause when I click on the video, so I have to find out how I can control that.
Stay tuned for further updates...
## known ToDos
* find a solution how to prevent mouse click play/pause
* find a way to find out the difference between training paused/stopped (to maybe show a training summary instead of the video?)
* think of the basic concept and try out a way to calculate video playback speed based on live training data and then adjust video playback accordingly
* testing phase, including error handlings etc. - hopefully with more people than myself :)
* better ui - thinking of a fullscreen video with overlays of live training data
* some solution to select different training video
## misc links for future things
https://www.tutorialspoint.com/how-to-speed-up-down-the-video-in-video-js-player