Я выкладываю свою диссертацию онлайн, как видео с пользовательскими элементами управления для продвижения вперед (по аналогии с powerpoint) между «слайдами» анимированного видео.Некоторые переходы между двумя «слайдами» должны повторяться в цикле ~ 1 секунда, и в повторяющейся части происходит задержка.
Это единственное решение, которое я пробовал, так как у меня нетвремя (презентация в пятницу), а также опыт, необходимый для того, чтобы знать, какие другие форматы видео / анимированных изображений работают хорошо.Я собираюсь поиграть с различными форматами файлов (ogg, webm), чтобы увидеть, если это имеет значение.
Живой веб-сайт с презентацией диссертации.
<html>
<head>
</head>
<body>
<video
id="video-active"
width="640"
height="390"
controls="">
<source src="presentation.mp4" type="video/mp4">
</video>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
video = document.querySelector("#video-active");
framerate = 60;
thresholdFrameNo = 300;
timeToRevert = 0.5;
$(document).ready(function(){
document.querySelector("#video-active").defaultPlaybackRate = 1.0;
$("#video-active").on(
"timeupdate",
function(event){
onTrackedVideoFrame(this.currentTime, this.duration);
})});
function onTrackedVideoFrame(currentTime, duration){
currentFrame = Math.round(currentTime*framerate);
if(currentFrame > thresholdFrameNo){
video.currentTime -= timeToRevert;
}
}
</script>
</html>
Я ожидаю, что видео действительно быстро перейдет в позицию на полсекунды ранее, но перед воспроизведением на некоторое время (может быть, до полсекунды) в старой позиции поиска.