如何在 YouTube embed <iframe> 中重置活动的触摸事件侦听器？

Posted

技术标签:

【中文标题】如何在 YouTube embed <iframe> 中重置活动的触摸事件侦听器？【英文标题】：How can I reset active touch-event-listeners inside YouTube embed <iframe>? 【发布时间】：2018-02-04 17:09:39 【问题描述】：

tl;博士：

YouTube 嵌入视频 &lt;iframe&gt; 标签具有 touch-event-listeners。活动的触摸事件侦听器导致滚动性能问题 - AKA jank。我通常通过使用 touch-action: initial 在 CSS 中解决主动触摸事件相关的卡顿问题。这对于 Youtube 嵌入视频&lt;iframe&gt; 元素不起作用。

简介：

Kayce Basques - Google 技术人员 - 写道：

当您滚动页面时，如果出现页面感觉没有固定在您手指上的延迟，这称为滚动卡顿。很多时候当你遇到滚动卡顿时，罪魁祸首是触摸事件监听器。

触摸事件侦听器通常可用于跟踪用户交互 并创建自定义滚动体验，例如取消滚动 与嵌入式 Google 地图交互时完全可以。

目前， 浏览器无法知道触摸事件监听器是否会取消 滚动，所以他们总是等待听众完成之前 滚动页面。

我已经找到了一种使用 touch-action 的 CSS 来回避这个问题的方法

touch-action CSS 属性指定用户是否可以通过触摸屏操作给定区域以及以何种方式操作（例如，通过浏览器内置的平移或缩放功能）。

如果我使用touch-action: initial，问题就会消失。

如果您想查看导致滚动卡顿的原因和不导致滚动卡顿的原因，请查看下面的屏幕截图

红色按钮会导致卡顿，而绿色按钮不会。两者的唯一区别是红色按钮设置为touch-action: manipulation，这使得红色按钮主动“监听”并在滚动之前处理输入

问题

我嵌入了来自 Youtube 的视频。 iframe 包含活动的触摸事件侦听器。我上面提到的方法不起作用。我无权访问 Youtube 代码来编辑听众和set them to passive。

我已尝试缩小问题范围。我发现类 .html5-video-player 的元素具有以下 CSS

.html5-video-player 
    touch-action: manipulation;

根据the docs，manipulation可以

[...] 启用平移和捏缩放手势，但禁用其他 非标准手势，例如双击缩放。禁用双击 缩放消除了浏览器延迟点击生成的需要 用户点击屏幕时的事件。这是“pan-x”的别名 pan-y pinch-zoom"（为了兼容性，它本身仍然有效）。

和

[...] 也常用于完全禁用点击延迟 由于支持双击缩放手势而导致的事件。

这些都是我不需要的东西。

逻辑说我需要做的就是将它添加到我的 CSS 中

.html5-video-player 
    touch-action: initial;

但这不起作用，这也不起作用：

.html5-video-player 
    touch-action: initial !important;

或者这个：

.html5-video-player 
    touch-action: unset !important;
    touch-action: initial !important;

甚至这个：

.html5-video-player 
    touch-action: none !important;

即使我尝试不同的方法，例如：

*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe>*>.html5-video-player,
iframe .html5-video-player 
  /* <---- All of these don't work */
  touch-action: initial /* and all other variations mentioned above */

还是不行。

要了解它在屏幕上的实际外观，请查看下面的屏幕截图

代码沙盒：

* 
  max-width: 500px;
  margin: 1em auto;
  text-align: justify


button 
  color: white !important;
  background: green;


button:nth-child(odd) 
  /* <---- these buttons have active touch event listners and hinder scrolling */
  background: red;
  touch-action: manipulation


*>iframe,
iframe>*,
*>.html5-video-player,
.html5-video-player>*,
.html5-video-player,
iframe .html5-video-player 
  /* <---- All of these don't work */
  touch-action: initial

<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
  his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint blandit an sea. Etiam tincidunt his ad, ex assum fabellas deterruisset vix. Usu
  ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus usu. Libris
  sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et.<button>Button</button> Brute tation sea te, quas temporibus vel an. Nam cu
  legere malorum, sea ut<button>Button</button> tollit insolens reformidans. Ut mei vide mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod
  vulputate constituam no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id,
  in pro case choro. Cum in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam
  albucius detraxit usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam,<button>Button</button> eos sonet antiopam
  concludaturque ea, eos ei falli oporteat deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur
  disputationi, usu dicta veritus in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer
  eu mea. Eu qui sonet nusquam molestie, ex dicant <button>Button</button>facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit
  ei ius, sit ridens commune conceptam ei. Est purto putent accusamus in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute
  vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens, delectus deterruisset eu<button>Button</button> pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis
  ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur
  comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis
  vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret
  et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut, eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi
  accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse
  consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta percipit, et cibo zril clita mel. Quo elitr partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius
  et, agam decore conceptam no pro, vide aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus
  mediocrem. Ei his tamquam perpetua. Ei epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere,
  mea prima tincidunt assueverit at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel. Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et
  mei meis inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo.
  Volumus recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>
<iframe   src="https://www.youtube.com/embed/6h4_-F6jnyk?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet, ea audiam feugiat voluptatibus mea, eum ex prima electram. Malis tamquam ad nam, ius ne laudem accusata dissentiet. Quidam vocent inciderint eu sea, mel eu consul constituto, vix congue quidam fierent id. Et justo tantas populo
  his, laudem altera mei an. An dictas ancillae mediocrem ius. Exerci scaevola ei nam, ad vel prima mandamus. Pro eu eruditi probatus splendide, has ex nonumes minimum, sint<button>Button</button> blandit an sea. Etiam tincidunt his ad, ex assum fabellas
  deterruisset vix. Usu ex diam molestiae similique, an viris aliquip tacimates eam. Cum vitae nonumes te, ne ius nostro omittam probatus, mea te meis commodo reprehendunt. Purto omittam probatus at eam. Eam fugit inermis ut, cu fastidii inimicus vituperatoribus
  usu. Libris sapientem posidonium mea ut, an ipsum postulant referrentur mea. Et vim nihil ponderum disputationi, fuisset menandri percipitur sed te, labores mnesarchum appellantur has et. Brute tation sea te, quas temporibus vel an. Nam cu legere malorum,
  sea ut tollit insolens reformidans. Ut mei vide<button>Button</button> mucius copiosae, eum laudem eligendi an. Invidunt deterruisset an his, ex duis apeirian vel. Cum ut quaeque sensibus expetenda. Nec cu audiam delicatissimi. Ius quod vulputate constituam
  no, cu lobortis consectetuer duo. Tota simul populo et quo, ad per aliquip graecis consetetur, mei et adhuc laboramus. Aeque nostro vocent eu quo, ad alia virtute pro, eu sit graeci honestatis. Dolore volutpat efficiendi nam id, in pro case choro. Cum
  in liber dissentiunt necessitatibus. Sit ut recusabo sadipscing disputando, congue salutatus scribentur duo ei. Vim eu natum integre feugait, at esse tincidunt usu. Nonumy accusata in cum. Augue voluptua antiopam in nec, ut aperiam albucius detraxit
  usu. Mucius salutatus mei no, congue maiestatis pro cu. Agam tota volutpat usu ne, atqui scribentur dissentiet in usu. Vel justo option pertinax at, justo essent at sit. Mea te vivendo conceptam, eos sonet antiopam concludaturque ea, eos ei falli oporteat
  deserunt. Ne vix libris scripta prompta, vis ex vitae impetus mandamus. Pri ne populo incorrupte percipitur, reque putent dignissim et vis. Saepe fuisset qui eu, in probo assueverit nam. An quo scriptorem appellantur disputationi, usu dicta veritus
  in. Ne deterruisset voluptatibus qui, cu usu tamquam persecuti, pri detracto gloriatur definitiones id. Veniam inermis ut has. In timeam efficiendi efficiantur his, vix posse facilis ea, altera sententiae consectetuer eu mea. Eu qui sonet nusquam molestie,
  ex dicant facete platonem mea, in facer alterum his. Cu eum appetere sadipscing. Alii eirmod invenire est ea. Te qui modo ponderum maluisset, saepe exerci accumsan est et. Unum quas velit ei ius, sit ridens commune conceptam ei. Est purto putent accusamus
  in. In mel graeci labores, eos enim idque ex. Id tollit putent sed, laoreet accommodare consectetuer eu duo. Augue facilisi explicari no vis. Eu cum placerat gloriatur, vel virtute vituperatoribus ex, ipsum ocurreret eu sed. At his aliquid adolescens,
  delectus deterruisset eu pro. His dicat dolores ex, vel id tempor referrentur, agam congue maiestatis nec id. Ei vix option menandri appellantur. Fabulas graecis ponderum mea te. Ad solum maluisset assentior eam, qui libris indoctum scriptorem cu. At
  elit legere iisque sea, eius ponderum et nam. Has ne aliquid impedit corrumpit, an munere rationibus sea. Ut qui facilis vivendo consectetuer. Explicari neglegentur comprehensam te pri. Sanctus iudicabit deterruisset ea his. Nam te affert nullam, ex
  diam contentiones vix. Mel cu nisl autem docendi. Cu possit tamquam aliquid eum, congue iudico ut pro, lobortis praesent at quo. Vim cu tibique adipiscing. His nobis vocent tritani et. Mei ne deserunt constituam, usu prima putant et. In has duis audiam
  delectus, id nam tota delectus, no sanctus facilisi accusata sed. Audire deseruisse qui ei, no mel soleat doming, an pri agam posse eleifend. Duo lucilius elaboraret et. Eu illud ludus aperiri duo, cu malis dolorem eos. Reque aperiri similique vim ut,
  eu vel hinc possit. No nusquam nominavi elaboraret sea, at solum ignota his. At quando everti definitionem pri. Eu eum meis consulatu, nec audiam vivendo ne, eruditi accusamus persequeris cum no. Nam ne purto legimus. Qui saepe utroque meliore in. Dicunt
  nonumes referrentur per id. Ne mel pertinacia constituto appellantur. Eos cu alii habeo iudicabit. Nec et verterem abhorreant quaerendum, qui an nobis noluisse consectetuer, no vero utinam facete has. Eu semper impetus intellegebat vis, ad mea scripta
  percipit, et cibo<button>Button</button> zril clita mel. Quo elitr<button>Button</button> partiendo comprehensam no. Mundi quaerendum at usu. Vel et iisque comprehensam vituperatoribus. Has appetere moderatius et, agam decore conceptam no pro, vide
  aliquam salutandi cum te. Quo probo deleniti imperdiet ne. Facer dignissim ad sed, possit lucilius moderatius ne eum, eius reque eam ex. Assum fierent pro no. Eu ignota commodo facilis eum, per ex mutat mandamus mediocrem. Ei his tamquam perpetua. Ei
  epicurei erroribus disputationi usu. Eos delenit aliquando tincidunt eu. Ad option utamur nam, quo eu munere altera delenit, causae ornatus molestie no vix. Pro ne antiopam consulatu. Ea mei accusam mentitum appetere, mea prima tincidunt assueverit
  at. Ius appetere accusamus ex, pri an justo sonet. Ne omnis iisque per. Dicam menandri ea mel.<button>Button</button> Audiam assentior no mel, ea dicam vituperata pri, at eum timeam offendit vivendum. In eum voluptatibus vituperatoribus, et mei meis
  inani putent. Sit eu aliquid tractatos definiebas. Populo omnesque necessitatibus eum no, dicant graece dolores vix ne. Nec ei homero recusabo complectitur, graecis urbanitas in duo. Prima complectitur id vim, no quas causae expetendis duo. Volumus
  recusabo adolescens ut duo. No eos erat electram instructior, adhuc nemore conceptam et duo</p>

问题：

如何关闭/禁用/重置 Youtube 嵌入中的触摸事件侦听器 &lt;iframe&gt;？

【问题讨论】：

我认为除非您自己托管 iframe，否则这是不可能的：***.com/questions/1962707/… 或 ***.com/questions/583753/…。 【参考方案1】：

您不能将 CSS 样式应用于 &lt;iframe&gt; - 它是具有新 CSS 级联的新文档。

相反，您需要一些 JS 来将样式属性应用到新文档，并且您需要一个 CORS header 集或在您自己的域上托管 &lt;iframe&gt;。

完成后，您可以操作 &lt;iframe&gt; 内容以包含您的样式。已经有better answers 在这里提供帮助。

但是，即使您可以这样做也可能还不够，因为 YouTube 正在切换到应用 Shadow DOM（如果您 opted in，他们已经这样做了）在这种情况下，视频播放器本身会获得您无法使用的阴影样式树从&lt;iframe&gt;访问。

在您的 sn-p 中，您直接嵌入了 &lt;iframe&gt;。而是使用YouTube API 创建播放器。这会暴露 player.removeEventListener()，它可以删除 janky 事件和 player.getIframe()，它使您可以直接访问框架的 DOM。

你也可以在创建事件中访问播放器：

// Loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Once the script has loaded add the player
function onYouTubeIframeAPIReady() 
  var player = new YT.Player('player', 
    height: '390',
    width: '640',
    videoId: 'ylLzyHk54Z0',
    events: 
      'onReady': onPlayerReady
    
  );


// Once the player is ready set its style
function onPlayerReady(event) 
  event.target.style.touchAction = 'initial';

&lt;div id="player"&gt;&lt;/div&gt;

尽管 sn-p 由于使用自己的沙盒 &lt;iframe&gt; 进行预览而出现大量错误。

【讨论】：

这非常有见地，解决了所有问题。非常感谢基思！

以上是关于如何在 YouTube embed <iframe> 中重置活动的触摸事件侦听器？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 YouTube embed <iframe> 中重置活动的触摸事件侦听器？

如何循环嵌入的 YouTube 视频？

在 youtube embed 上循环播放视频时如何隐藏播放列表

如何在引导程序的中心对齐 YouTube 嵌入视频

Youtube - 如何在嵌入链接/<iframe> 中强制 480p 视频质量

如何嵌入 youtube 直播聊天