0

嗨，我正在尝试让一个按钮在 30 分 30 秒后出现在我的视频下方。当我联系 Wistia 支持时，他们给了我这个链接并告诉我他们不是编码员，无法进一步帮助我。我对javascript一无所知，我知道一点CSS。我在这里阅读了另一个网站上的帖子并将其复制到我的网站，希望它会起作用。我在视频的内嵌嵌入下方添加了 javascript 代码，然后将 CSS 放入 wordpress 中的自定义附加 css 编辑器中。

当我这样做时，它的一部分起作用了，我在那里的按钮消失了，但是当我试图在 30 分 30 秒的标记处触发它时，它从未出现过，我根本无法让它出现。这是该页面的链接，供您查看，下面是我用来嵌入视频的代码以及用于隐藏按钮的 css。任何帮助将不胜感激，因为我对此很陌生。

这是我在视频嵌入中使用的代码：

<script src="https://fast.wistia.com/embed/medias/c5khj4dcbi.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_c5khj4dcbi videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/c5khj4dcbi/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>
<script>
window._wq = window._wq || [];

// target our video by the first 3 characters of the hashed ID
_wq.push({ id: "c5khj4dcbi", onReady: function(video) {
  // at 1830 seconds (30.5min x 60 = 1830), do something amazing
  video.bind('secondchange', function(s) {
    if (s === 1830) {
      // Insert code to do something amazing here
      // console.log("We just reached " + s + " seconds!");
   $( "#mybutton" ).addClass( "ShowMeButton" );
    }
  });
}});

</script>

这是我在 wordpress 编辑器自定义 > 附加 CSS 上使用的 CSS：

.page-id-741 #mybutton {
   opacity: 0;
}
.ShowMeButton {
   opacity: 1;
    filter:alpha(opacity=100);
}

4

1 回答 1

0

我假设您正在跳过视频以到达脚本运行的位置。

使用 Wistia .secondsPlaying() 函数，它只显示用户播放视频的实际秒数。

您要查找的函数是 .time()，它以秒为单位输出用户在视频中的实际位置。

尝试这个：

<script>
  var videoTrigger = false;
  window._wq = window._wq || [];
  _wq.push({ id: 'xxxxxxxx', onReady: function(video) {
    video.bind("secondchange", function() {
      if (video.time() >= 1830 && videoTrigger !== true) {
        videoTrigger = true;
        console.log("Run code here");
      }
    });
  }});
</script>

请注意，如果用户跳过激活点，此代码也会激活（因为它使用 >= 和变量而不是 ===）。

于 2021-03-25T04:40:54.940 回答