时间戳

首页 > 解决方案 > Vimeo Froogaloop API 鼠标悬停播放/卸载

javascript - Vimeo Froogaloop API 鼠标悬停播放/卸载

问题描述

我有一个嵌入的 Vimeo 视频，使用鼠标悬停播放和卸载以在悬停时启动和重置。

我让它在视觉上工作，但我收到控制台错误：

未捕获的 TypeError:... (reading 'ready')(reading 'play') (reading 'unload')

如果我隐身运行它，则视频仅在单击时开始，然后鼠标悬停功能起作用。

谢谢！

查看 Codepen

这是HTML：

<div id="wrapper">
  <div class="card">
    <iframe class="product-card-media" id="player1" type="text/html" width="550px" height="550px" frameborder="0" src="https://player.vimeo.com/video/631577098?api=1&controls=0&amp;player_id=player1"></iframe>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

  <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

这是Javascript：

$('.product-card-media').each(function() {
  var player = $("#" + this.id);
  froogaloop = $f(player[0].id);

  player.mouseover(function() {
    froogaloop.api('play');
  }).mouseout(function() {
    froogaloop.api('unload');
  });
});

标签： javascripthtmlvimeo-apivimeo-playerfroogaloop

解决方案

推荐阅读