Safari：自定义光标在单击时更改为默认值

Question

我有一个很奇怪的问题：

我有一个页面，上面有一些视频。当我将鼠标悬停在视频上时，光标变为自定义播放按钮。当您单击视频并开始播放时，光标会变为暂停按钮（反之亦然）。

此过程在除 Safari 之外的所有浏览器中都能完美运行。当我将鼠标悬停在视频上时会显示自定义光标，但是一旦我单击视频，自定义光标就会显示几分之一秒，然后它会变为默认光标。当我移动光标时，它再次变为自定义光标。所以问题只出在点击事件上。

这是我的代码：

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/

Answer 1

这是使其在 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);
    }
  });
});

Demo