Safari: пользовательский курсор меняется на щелчок по умолчанию - PullRequest
Новая
       3

Safari: пользовательский курсор меняется на щелчок по умолчанию

0 голосов
/ 02 июня 2018

У меня очень странная проблема:

У меня есть страница с несколькими видео.При наведении курсора на видео курсор меняется на пользовательскую кнопку воспроизведения.Когда вы нажимаете на видео и оно начинает воспроизводиться, курсор превращается в кнопку паузы (и наоборот).

Этот процесс отлично работает в любом браузере, кроме Safari.Пользовательский курсор отображается при наведении курсора на видео, но как только я нажимаю на видео, пользовательский курсор появляется на долю секунды, но затем он меняется на курсор по умолчанию.Когда я перемещаю курсор, он снова меняется на пользовательский курсор.Так что проблема только в событии click.

Это мой код:

jQuery: 

$(document).ready(function() {
  $(".container-video").click(function(){
    ($(this)[0].paused)?$(this)[0].play():$(this)[0].pause();
    if(($(this)[0].paused))
    $(this).addClass("paused").removeClass("playing");
    else
    $(this).addClass("playing").removeClass("paused");
  });
});

CSS: 

.paused {
   cursor: url(/images/play-button.cur), url(/images/play-button.cur), auto;
 }

.playing {
  cursor: url(/images/pause-button.cur), url(/images/pause-button.cur), auto;
}

СделалКто-нибудь еще сталкивался с подобной проблемой?Это ошибка в Safari или я делаю что-то не так?

Редактировать: Сделал быстрый jsfiddle из примера: https://jsfiddle.net/du1Lzwra/

1 Ответ

0 голосов
/ 02 июня 2018

Вот обходной путь / решение, чтобы заставить его работать в Safari.Просто добавил settimeout с определенным временем.Их изменение может прекратить работу ... 

$(document).ready(function() {
  $(".container-video").click(function() {
    $(this)[0].paused ? $(this)[0].play() : $(this)[0].pause();
    if ($(this)[0].paused) {
      $(this).addClass("paused");
      setTimeout(() => {
        $(this).removeClass("playing");
      }, 269);
    } else {
      setTimeout(() => {
        $(this).addClass("playing");
        $(this).removeClass("paused")
      }, 481);
    }
  });
});

Демо

...