javascript - 播放嵌入的 YT 时停止 CSS 动画

Question

我一直在尝试找到一些解决此问题的好方法，但无济于事。我有一个我正在使用的个人资料网站，它使用轮播来展示我以前的一些作品。

轮播的其中一项是 YT iFrame。轮播有两个主要功能:

• 用于导航轮播的下一个和上一个按钮
• 当您将鼠标悬停在轮播的某个元素上时触发的动画；就像翻转卡片一样，它会翻转并显示元素的一些详细信息。

轮播中的元素主要是 图片，但我还添加了一个 YT iFrame。我面临的问题很明显；当您将鼠标悬停在包含 iFrame 的元素上时，它会启动翻转动画。

所以我需要做的是检查视频何时播放然后禁用动画(最好只针对该元素)...

关于我如何做到这一点有什么建议吗？

这是直接从我的本地机器上获取的代码笔(因此引用了脚本)。

https://codepen.io/Todai/pen/GqGJxR

一些示例代码:

            <div class="item c">
                <div id="f1_container">
                  <div id="f1_card" class="shadow">
                    <div class="front face">
                        <iframe width="250" height="200" src="https://www.youtube.com/embed/92i9TvuVtQc" frameborder="0" allowfullscreen></iframe>
                          </div>
                          <div class="back face center">
                            <p>A distributed software built in Erlang, using a MSSQL instance and
                                a C# Web Api end-point.</p>
                            <p>I was in charge with working on the Android and web front-end.</p> 
                      <a href="https://github.com/mustsweden/GekkoAndroid/tree/master/geostocks"> <span> <i class="fa fa-github fa-2x"> </i> </span></a>
                    </div>
                </div>
            </div>
            </div>

Answer 1

我认为您应该使用 IFrame 播放器 API。因此，您可以将 YouTube 视频播放器嵌入您的页面并使用 JavaScript 控制播放器。当播放器状态发生变化时，API 将调用 onPlayerStateChange 函数。你会知道视频何时播放，然后删除动画。您可以在下面看到以下代码: 动画将再次添加，直到视频播放完毕。

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      stopAnimation();
      done = true;
    }else{
      startAnimation();
      done=false;
    }
  }
  function stopAnimation() {        $("#player").parent().parent().addClass('notransition');
  } function startAnimation(){   $("#player").parent().parent().removeClass('notransition');

}