Html 如何在Angular 9中使视频在鼠标上方播放并在鼠标上暂停？

我找到了一些HTML5的例子，比如

控件循环onmouseover=“this.play（）”onmouseout=“this.pause（）；”

，但它在Angular 9模板中不起作用。 我想，我需要在组件中添加一些方法，如：

  over(): void {
    //TODO
  }

  out(): void {
    //TODO
  }

然后添加到模板中：

    <div style='width:100%;height:100%' align="center" onmouseover="this.play()" onmouseout="this.pause()">
      <iframe src="..." style='min-width: 30%; height: 315px' allowfullscreen
              (mouseover)='over()' (mouseout)='out()'
        >
      </iframe>
</div>

---

不幸的是，我不知道如何在组件中实现这两种方法，这样我的视频将从我的链接播放播放器。

我看到您正在嵌入，所以首先：您是否计划使用特定的视频平台提供商（如YouTube、Vimeo等），或者这是否太过动态而不知道？谢谢您的回答。通常是动态的，应用程序中应该存在多种类型的视频（不仅仅是像youtube这样的一种类型）。我看过mouseoverview在网站上的表演，链接来自哪里。哦，我明白了。。。因为我必须为使用嵌入式和本地视频的项目创建自定义控件，但至少我们有可能的提供商列表，所以我只是让它识别视频来自何处（可能从url推断视频，或者只是在指定平台的位置添加一个字段），并根据其类型设置适当的API（HTML、YouTube、Vimeo…）希望这能给你带来新的想法，或许会有所帮助。