Question

我正在尝试制作一个悬停播放的视频库......只有在悬停时才会播放。但由于某些原因，即使鼠标退出，有时视频仍会继续播放。

我正在使用aurelia的mouseover.delegate="hoverVideo($index)"和mouseout.delegate="hideVideo($index)"来启动播放。

  hoverVideo = index => {
    let id = "#video" + "-" + index.toString();

    let isPlaying =
      $(id).get(0).currentTime > 0 &&
      !$(id).get(0).paused &&
      !$(id).get(0).ended &&
      $(id).get(0).readyState > 2;

    if (!isPlaying) {
      $(id)
        .get(0)
        .play();
    }
  };
  hideVideo = index => {
    let id = "#video" + "-" + index.toString();
    let isPlaying =
    $(id).get(0).currentTime > 0 &&
    !$(id).get(0).paused &&
    !$(id).get(0).ended &&
    $(id).get(0).readyState > 2;

    if (isPlaying) {
    $(id)
      .get(0)
      .pause();
    }
  };

如何让视频始终在鼠标退出时停止播放？

Answer 1

尝试使用mouseenter.trigger和mouseleave.trigger。触发器事件侦听器直接附加到html元素（而不是像代理人那样在body标签上），并且可以根据页面的年龄变化来提高响应速度。

此外，您可以尝试在事件回调中的TaskQueue.queueMicroTask调用中包装（部分）事件处理程序逻辑。这将在下一个requestAnimationFrame执行您的代码，并确保元素已准备好响应您的更改。

并且可能将元素存储在变量中，因此您不需要多次查询DOM。

示例：

hideVideo = index => {
  const id = "#video" + "-" + index.toString();
  const video = $(id).get(0);
  const isPlaying = video.currentTime > 0
    && !video.paused 
    && !video.ended
    && video.readyState > 2;

  if (isPlaying) {
    // if the element is still somehow busy during mouseleave
    this.taskQueue.queueMicroTask(() => {
      video.pause();
    });
  }
}

或者：

hideVideo = index => {
  const id = "#video" + "-" + index.toString();
  const video = $(id).get(0);

  // if the state isn't always up-to-date in time
  this.taskQueue.queueMicroTask(() => {
    const isPlaying = video.currentTime > 0
      && !video.paused 
      && !video.ended
      && video.readyState > 2;

    if (isPlaying) {
      video.pause();
    }
  });
}

如果仍然不起作用，可能视频的状态不是您期望的那样。类似pause()的操作应该是幂等的，因此您可以尝试完全跳过isPlaying检查。

悬停和播放视频

1 个答案: