Angular 2+ iframe 视频播放器点击事件

Question

我有这个在加载时播放视频的 iframe：

<section>
  <div class="row" >
    <div style="padding-top: 56.25%">
      <iframe
        src="https://players.brightcove.net...&autoplay&muted&allowfullscreen&webkitallowfullscreen&loop&fullscreen"
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
        allow="encrypted-media"
        style="
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
      ></iframe>
    </div>
  </div>
</section>

我想在视频发生点击事件后运行一个函数。基本上我想在有人点击视频时离开这个组件（这个视频作为屏幕保护程序的一部分播放）。如何正确编写组件？

问题在于，由于 iframe 中正在播放视频，因此外部 div 上的任何事件都不起作用。点击后它只是暂停/播放视频。

Answer 1

解决方案：在其顶部覆盖一个 div 来处理 onclick 事件

<section>
  <div class="row" >
    <div style="padding-top: 56.25%">
      <iframe
  src="https://players.brightcove.net...&autoplay&muted&allowfullscreen&webkitallowfullscreen&loop&fullscreen"
        allowfullscreen
        webkitallowfullscreen
        mozallowfullscreen
        allow="encrypted-media"
        style="
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
      ></iframe>
      <div style="
          z-index: 1;
          position: absolute;
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
        "
        (click)="doTheThing()"></div>
    </div>
  </div>
</section>

谢天谢地，你是全屏的，否则确保覆盖在顶部会很痛苦。如果源也由您提供，您可以直接访问 iframe 的 contentDocument.body 并向其中添加事件侦听器。