kamp/FTMS-Rower
1
0
Fork 0
Code Issues Pull Requests Activity

docs

Browse Source 
Signed-off-by: Manuel <manuel@kmpr.at>
This commit is contained in:
Manuel Kamper 2024-10-31 16:04:18 +01:00
parent 7124f923ff
commit 2caca3285a
2 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/PoC.md
View File

@ -24,5 +24,23 @@ Also quickly downloaded a random rowing video from youtube for that purpose, Som
I use the latest release of Video.js, version 8.19.1.
To include it in the existing project, only a few steps were required: copy the video.min.js and video.min.css into the project folders and include some code in the index.html file.
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 trainig. 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.
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, to figure out the difference for pause/stop, I will 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.
´´´
const player = videojs('rowing_video');
player.bigPlayButton.hide(); //just don't show it
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();
´´´
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.
´´´
´´´
Stay tuned for further updates...

21
index.html
View File

@ -45,7 +45,7 @@
</div>
<h2>Rowing video</h2>
<video id="rowing_video_1" class="video-js" controls preload="none" width="640" height="480" poster="video/posters/video.png" data-setup="{}">
<video id="rowing_video" class="video-js" controls preload="none" width="640" height="480" poster="video/posters/video.png" data-setup="{}">
<source src="video/video.mp4" type="video/mp4">
<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>
@ -54,11 +54,30 @@
<script>
//hide player controls in video.js
const player = videojs('rowing_video');
player.bigPlayButton.hide(); //just don't show it
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) {
let data = parseRowerData(event.target.value);
if (typeof data['Instantaneous Pace'] != "undefined") {
document.querySelector('#pace').textContent = data['Instantaneous Pace'];
if (data['Instantaneous Pace'] == 0) {
//training has not yet started, or training is paused or stopped
} else {
//training has started or training is in progress
}
}
if (typeof data['Average Pace'] != "undefined") {
document.querySelector('#avg-pace').textContent = data['Average Pace'];