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

您需要使用YouTube API，然后使用JS检测视频是否正在播放，然后仅阻止通过ID翻转磁贴。

Answer 2

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

}

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

2 个答案: