草庐IT

javascript - 全屏视频不允许在 Firefox 上滚动

coder 2024-12-20 原文

我正在使用 fullscreen.js 脚本，在我的其中一个屏幕上我将有一个全屏 Vimeo 视频。显然，这会导致 FF 出现问题，并阻止我在到达视频屏幕后立即向上或向下滚动。该问题已提交到脚本的 GitHub 页面，但作者将其驳回，因为它是一个 FF 问题 (https://github.com/alvarotrigo/fullPage.js/issues/803)。

我将所有这些与基础 CSS 一起用于响应式视频:

<div class="flex-video widescreen vimeo"> 
    <iframe src="<?php the_sub_field('video') ?>" 
        width="400" 
        height="225" 
        frameborder="0" 
        webkitAllowFullScreen 
        mozallowfullscreen 
        allowFullScreen></iframe> 
</div>

错误是这个:https://bugzilla.mozilla.org/show_bug.cgi?id=779286但我没有看到它在 Mac 上的 FF 36 上得到解决。这个问题也没有发生在 chrome 上。

这是 GitHub 线程上其他人的问题示例:http://jsbin.com/tunove/1/edit?html,output

最佳答案

问题:

您正在查看的 Mozilla 错误实际上是指 the fullscreen mode API ，一个不相关的 API 已修复。我认为您正在寻找的错误报告是这个:

Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.

Steps to reproduce:

I have a div in which I manually capture mousewheel events, and use that to scroll the div. Inside of this div, I have an embedded youtube video, in an iframe.

Actual results:

While scrolling, if the mouse is over the iframe, scrolling no longer works, because all mouse events, including mouse wheel events, are captured by the iframe, and are not sent to the parent window.

Expected results:

The mouse wheel event should have been propagated to the parent window. This is the behavior in chrome and safari.

Since the iframe is on a different domain, there does not appear to be any feasible workaround for this.

此错误报告仍处于公开状态，似乎并未在实现过程中。

此外，根据错误报告，此行为未由任何规范定义。

为了它的值(value)，我给这个错误报告投票以增加重要性。我同意，这是一个用户体验问题。

解决方法:

不幸的是，就直接修复 wheel 事件问题而言，GitHub 问题中的建议是关于我们对跨源 iframe 的所有建议。如果框架内容在同一个域中或在您的控制之下，您可以在 iframe 中添加另一个事件监听器，但是 Same-Origin Policy防止这种跨域。

防止 iframe 窃取跨源框架的 wheel 事件的唯一可用选项是:

  • 用透明 div 覆盖大部分或全部 iframe。
  • 使用pointer-events: none;在 iframe 上。这也将完全阻止点击视频，因此它与用透明 div 覆盖整个视频具有相同的效果。

其他选项:

这个问题显然仅限于 wheel事件，因为在 iframe 上滚动时可以滚动父文档。

<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>

<div style="background: red; width: 20px; height: 5000px;"></div>

fullPage.js 不是这样构造的，但是如果 iframe 的父元素实际上是一个可滚动元素，则可以监听 scroll。事件并对此使用react。

有点不稳定，但这里有一个使用 scroll 事件而不是 wheel 事件的类似示例。

示例(JSFiddle):

var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
    if (autoScrolling) {
        return;
    }
    //Get this element and find the number of children.
    var $this = $(this);
    var children = $this.children('.pane').length;
    //Find the height of each pane, and the current position.
    var paneHeight = this.scrollHeight / children;
    var position = this.scrollTop / paneHeight;
    var positionRound = Math.round(position);
    //Find the target position.
    var positionOff = position - positionRound;
    var toShow = null;
    if (positionOff < 0) {
        toShow = positionRound - 1;
    }
    else if (positionOff > 0) {
        toShow = positionRound + 1;
    }
    //If scrolling to a new pane, find the next one.
    if (toShow !== null) {
        autoScrolling = true;
        $this.animate({
            scrollTop: paneHeight * toShow
        }, {
            duration: 1000,
            complete: function() {
                setTimeout(function() {
                    autoScrolling = false;
                }, 500);
            }
        });
    }
});
html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrap {
    height: 100%;
    width: 100%;
    overflow: auto;
}
.pane {
    width: 100%;
    height: 100%;
    position: relative;
}
iframe {
    background: white;
    border: 0;
    outline: 0;
    display: block;
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrap">
    <div class="pane" style="background: red;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: green;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: blue;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
</div>

关于javascript - 全屏视频不允许在 Firefox 上滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29344162/

javascriptFirefoxiframecodesectioncssscrollmousewheel

有关javascript - 全屏视频不允许在 Firefox 上滚动的更多相关文章

  1. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  2. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby - Watir 更改 Mozilla Firefox 首选项 - 2

    我正在使用Watir运行一个Ruby脚本来为我自动化一些事情。我试图自动将一些文件保存到某个目录。因此，在我的Mozilla设置中，我将默认下载目录设置为桌面并选择自动保存文件。但是，当我开始运行我的脚本时，这些更改并没有反射(reflect)出来。似乎首选项恢复为默认值。我已经包括以下内容require"rubygems"#Optional.require"watir-webdriver"#Forwebautomation.require"win32ole"#Forfilesavedialog.并打开一个新的firefox实例:browser=Watir::Browser.new(:

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  9. ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2

    我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？ 最佳答案 当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje

  10. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID？ - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它，以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7，这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

随机推荐