Замените изображение на видео при наведении, дождитесь загрузки видео, чтобы внести изменения, но элемент мигает - PullRequest
Новая
       4

Замените изображение на видео при наведении, дождитесь загрузки видео, чтобы внести изменения, но элемент мигает

0 голосов
/ 29 января 2020

У меня есть скрипт, который на лету заменяет миниатюру изображения миниатюрой видео (например, миниатюру YouTube при наведении курсора). Это для моего лампового сценария. Проблема в том, что при использовании jQuery replaceWith мерцание изменения не является плавным переходом. 

<script>
  $(".video-thumb .video-splash").hover(function() {
    var value = $(this).attr("data-video-thumb");

    if (value == "") {
      return;
    }

    var width = $(this).width();

    var height = $(this).height();

    $(this).replaceWith(
      $(
        '<video loop muted onmouseover="this.play();" onmouseout="this.pause();" width="' +
          width +
          '" height="' +
          height +
          '" src="' +
          value +
          '"/>'
      )
    );
  });
</script>

Как бы я go решил проблему? Предварительная загрузка миниатюр видео внутри <head> не поддерживается.

...