javascript - 拍照模式下如何判断留影类型?
问题描述
画中画模式有两个离开动作“关闭”和“返回标签”
他们都产生leavepictureinpicture
event。
有什么方法可以确定是哪个按钮触发了这个事件?
事件主体似乎完全相同。但从用户的角度来看,当我按下“关闭”时,我希望关闭播放器,当我按下“返回标签”时,我会返回视频
解决方案
两个按钮的区别在于“关闭”按钮将暂停视频,而“返回标签”按钮将继续播放。
这是由浏览器处理的,因此您实际上不必检测单击了哪个按钮,默认行为应该没问题。
但是如果你真的想知道这一点,那么你可以检查在事件触发的那一刻视频是否正在播放,然后等待一个事件循环迭代让浏览器暂停视频,然后检查它现在是否暂停。
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>
但是,如果视频在他们获得“返回标签”之前暂停,那么您显然无法知道他们点击了哪里。
推荐阅读
- firebase - Firestore 文档获取请求承诺无法解决。我该如何解决这个问题?
- xpath - 使用 Xpath 获取属性名称(不是属性值)
- gdal - 用 gdal_sieve 消除大团块?
- oracle11g - Oracle 中 EXECUTE IMMEDIATE INTO 的 SQL Server 等效项是什么
- javascript - Angular 7 - 从兄弟组件发送 Output() 后调用兄弟组件内部的函数
- angular - 如何在Angular 2+ / 7 Typescript中解决(例如3)获取请求时显示(最初)加载屏幕并隐藏
- python - 从 Pandas pivot_table 行中删除异常值
- sendgrid - 将 blob 存储的最新内容附加到 SendGrid
- python - 有效过滤 CSV 文件的简单方法?
- javascript - AJAX JSON 跨域读取阻塞