悬停播放视频

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 检查。

悬停播放视频

Hovering and playing video

hover

html5-video

jquery-hover

aurelia