added play/pause

Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-10-31 16:33:39 +01:00
parent 3f1a643c7e
commit d9ee01b36b
2 changed files with 8 additions and 9 deletions

View File

@ -30,7 +30,7 @@ To include it in the existing project, only a few steps were required: copy the
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</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 trainig data, to figure out if training has startet, paused or stopped.
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.
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.
@ -41,9 +41,6 @@ player.controlBar.playToggle.dispose(); //remove completely
player.controlBar.progressControl.disable(); //show, but disallow user to use it
player.controlBar.fullscreenToggle.dispose();
player.controlBar.pictureInPictureToggle.dispose();
player.controlBar.captionsButton.dispose();
player.controlBar.chaptersButton.dispose();
player.controlBar.subtitlesButton.dispose();
player.controlBar.playbackRateMenuButton.disable();
```
@ -51,3 +48,8 @@ But that does not prevent play/pause when I click on the video, so I had to add
```
```
Stay tuned for further updates...
## misc links for future things
https://www.tutorialspoint.com/how-to-speed-up-down-the-video-in-video-js-player
https://stackoverflow.com/questions/19112255/change-the-video-playback-speed-using-video-js

View File

@ -61,9 +61,6 @@ player.controlBar.playToggle.dispose(); //remove completely
player.controlBar.progressControl.disable(); //show, but disallow user to use it
player.controlBar.fullscreenToggle.dispose();
player.controlBar.pictureInPictureToggle.dispose();
player.controlBar.captionsButton.dispose();
player.controlBar.chaptersButton.dispose();
player.controlBar.subtitlesButton.dispose();
player.controlBar.playbackRateMenuButton.disable();
function handleNotifications(event) {
@ -73,10 +70,10 @@ player.controlBar.playbackRateMenuButton.disable();
document.querySelector('#pace').textContent = data['Instantaneous Pace'];
if (data['Instantaneous Pace'] == 0) {
//training has not yet started, or training is paused or stopped
player.pause();
} else {
//training has started or training is in progress
player.play();
}
}
if (typeof data['Average Pace'] != "undefined") {