循环和暂停带有视频的文本叠加动画

Question

我正在使用一个webapp，该app可以自动播放视频循环，并带有文本叠加层，该叠加层会与视频同步淡入和淡出。但是，由于谷歌浏览器的自动播放视频政策，我需要对其进行设置，以使视频和相应的循环在用户与页面互动之前不会播放。

要实现此目的，我将删除自动播放功能，并具有该功能，以便用户可以通过正常单击视频来按需播放/暂停视频。

但是，我无法使文字叠加层与视频的任何暂停保持同步。

当前，我为此使用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');
};