播放嵌入式YT时停止CSS动画

geostocker 发表于 Dev

地质库存器

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

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

下一个和上一个按钮可浏览轮播和
当您将鼠标悬停在转盘项目上时触发的动画；就像翻转卡片一样，它会翻转并显示项目的一些详细信息。

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

因此，我需要做的是检查视频的播放时间，然后禁用动画（最好仅适用于该项目）...

关于如何做到这一点的任何建议？

这是直接从我的本地计算机上获取的一个Codepen（因此有脚本引用）。

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>

凯特

我认为您应该使用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');

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。