Каков самый быстрый способ перемещения X кадров назад в видео/анимации на веб-странице?

Я размещаю свою тезисную презентацию в Интернете в виде видео с настраиваемыми элементами управления для перехода вперед (аналогично 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>

Я ожидаю, что видео очень быстро перейдет к позиции на полсекунды раньше, но оно немного зависает (может быть, до полсекунды) в старой позиции поиска перед воспроизведением.

Итак, вы хотите иметь возможность воспроизводить видео по частям на протяжении всего времени?

zer00ne 22.05.2019 03:59

Просто отредактируйте свое видео, чтобы оно делало то, что вы хотите, в своей первоначальной форме?

Kaiido 22.05.2019 04:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
35
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я нашел аналогичный вопрос, чей главный ответ указал мне на проблему с ключевым кадром, что позволило мне исправить проблему, используя вывод следующей команды FFmpeg:

ffmpeg -i in.mp4 -c:v libx264 -x264opts keyint=5 out.mp4

где keyint=5 указывает ключевой кадр каждые пять кадров (указано в ветке форума это).

Другие вопросы по теме