如何在图像模式下确定剩余图像的类型？

Question

在“图片”视频模式下的图片有两个离开操作：“关闭”和“返回至选项卡”

他们两个都产生leavepictureinpicture event。

有什么方法可以确定此事件触发了哪个按钮？

事件主体似乎完全相同。但是从用户的角度来看，当我按下“关闭”按钮时，我希望关闭播放器，而当我按下“返回标签”时，可以返回视频

Answer 1

两个按钮之间的区别在于，“关闭”按钮将暂停视频，而“返回至标签”按钮将继续播放。

这是由浏览器处理的，因此您实际上不必检测单击了哪个按钮，但是如果您的视频仍在播放，那么您知道他们单击了“返回选项卡”。

if(document.pictureInPictureEnabled) {
  btn.onclick = e => {
    vid.requestPictureInPicture()
  };
  vid.onleavepictureinpicture = e => {
    if(!vid.paused)
      console.log("came Back to Tab");
  };
}
else document.body.textContent = "your browser doesn't Picture in Picture API";

<button id="btn">
enter PIP
</button>
<video src="https://storage.googleapis.com/media-session/caminandes/short.mp4" controls id="vid" muted></video>

但是，如果视频在获得“返回标签”之前已暂停，那么您显然无法知道他们在哪里点击了。