window.onload = function() {
// Video
var video = document.getElementById("video");
// Buttons
var playButton = document.getElementById("play-pause");
// Sliders
var seekBar = document.getElementById("seek-bar");
}
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
// Update the button text to 'Pause'
playButton.innerHTML = "Pause";
} else {
// Pause the video
video.pause();
// Update the button text to 'Play'
playButton.innerHTML = "Play";
}
});
// Event listener for the seek bar
seekBar.addEventListener("change", function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the slider handle is being dragged
seekBar.addEventListener("mousedown", function() {
video.pause();
});
// Play the video when the slider handle is dropped
seekBar.addEventListener("mouseup", function() {
video.play();
});
<video id="video" controls autoplay>
<source src=http://localhost:8090/feed1.webm>
</video>
<div id="video-controls">
<button type="button" id="play-pause">Play</button>
<input type="range" id="seek-bar" value="0">
</div>
Я пытаюсь отправить видеопоток на веб-сайт вместе с координатой, которая будет отображена на холсте html.Я должен иметь возможность прокручивать поток вперед и назад и показывать координаты каждого кадра.У меня есть прямая трансляция видео и отображение координат с помощью внешней панели поиска, но она не может контролировать видео.Какое потоковое приложение лучше всего, так как я пробовал obs и ffmpeg безрезультатно?Как получить панель поиска для управления видео?