媒体元素播放器退出全屏滚动问题
媒体元素播放器退出全屏滚动问题
提问于 2016-06-13 10:35:56
我有很长的网页，垂直滚动几个视频。使用Media Element Player播放视频，但是如果您进入全屏模式，然后退出全屏模式，则无论视频在页面上的位置如何，页面都会返回到最顶层。我想让它回到原来的地方。下面是我使用的代码：
var topPosition;
MediaElementPlayer.prototype.enterFullScreen_org =
MediaElementPlayer.prototype.enterFullScreen;
MediaElementPlayer.prototype.enterFullScreen = function() {
console.log('enter full screen');
this.enterFullScreen_org();
topPosition = window.pageYOffset;
console.log(topPosition);
}
MediaElementPlayer.prototype.exitFullScreen_org =
MediaElementPlayer.prototype.exitFullScreen;
MediaElementPlayer.prototype.exitFullScreen = function() {
console.log('exit full screen')
this.exitFullScreen_org();
ResetFullScreen();
}
function ResetFullScreen() {
console.log('top pos:', topPosition);
setTimeout(function () { window.scrollTo(0, topPosition) }, 500);
}console.log显示了"topPosition“的正确值，但window.scrollTo方法似乎不起作用。
回答 1
Stack Overflow用户
发布于 2016-06-13 11:07:35
看一看您的代码，它似乎应该可以工作。不过，我还有一种方法来设置可能起作用的卷轴。如果要滚动的元素不在顶层，这将非常有用。
存储滚动位置时：
topPosition = document.body.scrollTop;设置滚动位置时：
document.body.scrollTop = topPosition;如果要滚动的是主体内的元素，而不是主体本身，只需将document.body替换为需要滚动的元素即可。
另外，我在您的代码中发现了一个小问题：
MediaElementPlayer.prototype.enterFullScreen;'在这一行的末尾有一个随机的引号。
编辑：
如果那个方法不起作用，我还有一个主意要告诉你。当他们点击他们查看的视频时，将他们点击的元素存储在一个变量中。离开全屏后，将元素滚动到视图中。这样，你就会或多或少，在屏幕进入全屏时的位置。
每个视频都有一个包含以下内容的onclick；这将存储他们单击的元素。
lastVideoClicked = event.target;当离开全屏时，此代码将尝试将该元素滚动回视图。
lastVideoClicked.scrollIntoView();您可以在这里的Stack溢出站点上试用它--滚动到页面的底部，打开javascript控制台，然后输入代码document.getElementById('hlogo').scrollIntoView()。此滚动堆栈溢出徽标进入视图。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37796877
复制相关文章
相似问题
全屏windows媒体播放器
WKWebView媒体播放器全屏检测
强制iOS iPhone youtube播放器退出全屏
YouTube播放器API检测全屏退出
视频播放器全屏问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
