gpt4 book ai didi

javascript - Youtube 的 “scroll for details” 功能如何工作?

转载 作者:搜寻专家 更新时间:2023-11-01 05:19:25 25 4
gpt4 key购买 nike

Youtube 推出了新功能 - 能够在全屏模式下观看视频时滚动页面(屏幕在下方)。

我的网站上有一个 html5 播放器,我想在全屏模式下实现相同的滚动。

目前我不知道 Youtube 是怎么做到的。谁能给我解释一下? enter image description here

最佳答案

似乎正在发生的事情是变成全屏的元素实际上是视频播放器、评论等的包装。Youtube 将播放器更改为剧院版本并使其适合屏幕,但滚动会显示其余部分也全屏显示的内容。

我发现这个显示全屏演示的 fiddle ,我添加到它来展示这个概念:http://jsfiddle.net/krtw58z0/

requestFullScreen 在包装元素上被调用。虚拟“视频播放器”可以按我们喜欢的方式设置样式(全屏时我将宽度设置为 100%),您仍然可以滚动以查看其他子元素。

文档:https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

关于javascript - Youtube 的 “scroll for details” 功能如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53349361/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com