Videojs requestPictureInPicture() 在滚动到顶部和底部时只工作一次

Posted 2023-02-19

【中文标题】Videojs requestPictureInPicture() 在滚动到顶部和底部时只工作一次

【英文标题】：Videojs requestPictureInPicture() works only once on scrolling to top and bottom

【发布时间】：2020-06-25 12:44:48

【问题描述】：

我正在使用Videojs Framework 在页面上显示视频，但 PictureInPicture 功能存在问题。我试图在用户向下滚动时自动进入 PictureInPicture 模式，并在用户向上滚动（返回到实际的视频播放器）时再次退出 PictureInPicture 模式。 我第一次向下和向上滚动时一切正常，但之后的任何尝试都失败了。 这是我的代码：https://codepen.io/madefortestonly/pen/GRJxMya?editors=1011 这是我从 catch 块中得到的错误消息：

DOMException: Failed to execute 'requestPictureInPicture' on 'htmlVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture.
at Html5.requestPictureInPicture (https://vjs.zencdn.net/7.6.6/video.js:22669:23)
at Player.techGet_ (https://vjs.zencdn.net/7.6.6/video.js:26085:34)
at Player.requestPictureInPicture (https://vjs.zencdn.net/7.6.6/video.js:26787:21)
at Player.<anonymous> (pen.js:75:16)
at https://vjs.zencdn.net/7.6.6/video.js:4530:9

顺便说一句，有人似乎和我在这里遇到的问题完全相同：Why video.requestPictureInPicture() works only once? 看起来您需要单击页面进行滚动才能进行下一次尝试，因为滚动不是用户信任事件的一部分。 我尝试在向上滚动时使用 javascript 模拟点击，但到目前为止没有运气。

如何修复我的代码以在不告诉用户他/她需要单击页面上的某个位置的情况下自动来回滚动 PictureInPicture？

【参考方案1】：

您无法解决这个问题，因为您无法伪造用户交互。与浏览器的本机 PinP 相比，另一种实现方式（例如在页面内调整播放器的大小和重新定位播放器）可能是您的用例更好的选择。