Зацикливание и приостановка анимации наложения текста с видео

Question

Я работаю над веб-приложением, в котором используется автоматически воспроизводимый цикл видео с наложением текста, который постепенно исчезает и синхронизируется с видео.Однако из-за политики Google Chrome по автоматическому воспроизведению видео мне нужно настроить ее так, чтобы видео и соответствующий цикл не воспроизводились, пока пользователь не взаимодействует со страницей.

Чтобы добиться этого, я собирался удалить функцию автозапуска и сделать так, чтобы пользователь мог воспроизводить / приостанавливать видео, как он хочет, щелкая видео в обычном режиме.

Однако яУ меня проблемы с синхронизацией наложения текста с любой паузой видео.

В настоящее время я использую 2 функции для этого, loadVideo и loopText.Может ли кто-нибудь помочь мне найти способ достичь того, что я описываю?

function loadVideo(id, startagain) {
  var vid = document.getElementById("displayVideo");
  var mp4 = document.getElementById('mp4');
  mp4.src = id;

  vid.load();
  if (startagain == true) { //an attempt to create the described functionality
    vid.pause();
    vid.currentTime = 0;
    vid.play();
  } else {
    vid.play();
  }

  loopText();

  vid.onended = function() {
    vid.pause();
    vid.currentTime = 0;
    vid.play();
    loopText();
  };
};

function loopText() {
  $('h1').delay(9000).fadeIn('slow').delay(6000).fadeOut('fast');
  $('h2').delay(9000).fadeIn('slow').delay(6000).fadeOut('fast');
  $('h3').delay(9000).fadeIn('slow').delay(6000).fadeOut('fast');
  $('h4').delay(9000).fadeIn('slow').delay(6000).fadeOut('fast');
};