javascript - 拍照模式下如何判断留影类型？

Question

画中画模式有两个离开动作“关闭”和“返回标签”

他们都产生leavepictureinpicture event。

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

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

Answer 1

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

这是由浏览器处理的，因此您实际上不必检测单击了哪个按钮，默认行为应该没问题。
但是如果你真的想知道这一点，那么你可以检查在事件触发的那一刻视频是否正在播放，然后等待一个事件循环迭代让浏览器暂停视频，然后检查它现在是否暂停。

if(document.pictureInPictureEnabled) {
  btn.onclick = e => {
    vid.requestPictureInPicture()
  };
  vid.onleavepictureinpicture = e => {
    const was_playing = !vid.paused;
    setTimeout(() => {
      if( !vid.paused ) {
        console.log("came Back to Tab");
      }
      else if( was_playing ) {
        console.log("clicked the close button");
      }
      else {
        console.log("was already paused, no way to know");
      }
    }, 0 );
  };
}
else document.body.textContent = "your browser doesn't support the 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>

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