是否有更好的方法来定位带有时间戳链接的 Vimeo IFRAME?

问题描述 投票:0回答:1

我不是专业程序员,请怜悯我!

我会链接到使用 HTML 链接来定位 Vimeo 视频 iframe 中的时间戳。

我认为我的许多观众可能会错过 Vimeo 播放器上内置的“章节”功能,因此我想通过一个可跳过视频的链接列表来让我的访客万无一失。

我的解决方案“有效”,但恕我直言,它很笨重。每次单击,它都会从时间戳开始重新加载 iframe 中的整个视频。

请注意,通过实验,我创建了一个名称/值对“ar-random”来更改查询并强制重新加载视频。这些数值都是乱码,只是为了强制重新加载。

如果没有这个随机值,相同的视频将不会加载到 iframe 中。这个修复非常hacky,但它有效......有点像用胶带修复泄漏。

======

我在 YouTube 上看到了针对同一问题的解决方案,该解决方案要优雅得多。

使用 Youtube API,它加载了一个视频(而不是典型的嵌入代码。)

在 javascript 中有一个时间戳数组,HTML 链接点击触发了 javascript,并从数组中加载适当的时间,而不是每次点击时加载整个视频。

这种行为让人感觉播放头在移动,并且感觉更快、更快。

====

我正在使用 Wordpress,而 jQuery 的事情超出了我的想象。如果可能的话,我很乐意使用页面内的 javascript 来解决这个问题,并且不需要额外的插件。

关于如何改进这个问题有什么想法吗?

谢谢!


<h4>VIMEO TIMESTAMP LINKS</h4>

<div style="padding:56.25% 0 0 0;position:relative;">
<iframe name="vidframe" src="https://player.vimeo.com/video/605069004?    badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="POOL VIDEO">
</iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>


<strong>TIME STAMPS</strong>
<ul>
<li><a id="lesson-0" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=3465562923656565&autoplay=1#t=0m0s&share=copy">0 min 0 sec</a></li>
<li><a id="lesson-1" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=7465562923656565&autoplay=1#t=0m30s&share=copy">0 min 30 sec</a></li>
<li><a id="lesson-2" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=2455629236565653&autoplay=1#t=1m2s&share=copy">1 min 2 sec</a></li>
<li><a id="lesson-3" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=4455629236565653&autoplay=1#t=2m3s&share=copy">2 min 3 sec</a></li>
<li><a id="lesson-4" target="vidframe" href="https://player.vimeo.com/video/605069004?ar-random=9865562923665657&autoplay=1#t=2m47s&share=copy">2 min 47 sec</a></li>
</ul>

============

谢谢!

javascript wordpress iframe embed vimeo
1个回答
0
投票

您可以使用 Vimeo 的 SDK 来做到这一点。

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.setCurrentTime(2)

完整示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4>VIMEO TIMESTAMP LINKS</h4>

    <div style="padding: 56.25% 0 0 0; position: relative">
      <iframe
        name="video_frame"
        src="https://player.vimeo.com/video/605069004?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479"
        frameborder="0"
        allow="autoplay; fullscreen; picture-in-picture"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
        title="POOL VIDEO"
      >
      </iframe>
    </div>
    <script src="https://player.vimeo.com/api/player.js"></script>

    <strong>TIME STAMPS</strong>
    <ul>
      <li>
        <button class="chapter_selector" id="lesson-0" data-timestamp="0:0">A Humble Beginning</button>
      </li>
      <li>
        <button class="chapter_selector" id="lesson-1" data-timestamp="0:15">Some cool stuff</button>
      </li>
      <li>
        <button class="chapter_selector" id="lesson-4" data-timestamp="2:57">Happy Ending</button>
      </li>
    </ul>

    <script src="https://player.vimeo.com/api/player.js"></script>

    <script>
      var vimeo_iframe = document.querySelector("iframe[name='video_frame']");
      var vimeo_player = new Vimeo.Player(vimeo_iframe);
      
      document.querySelectorAll('.chapter_selector').forEach(found => {
        found.addEventListener("click", (element) => {
            let {timestamp} = found.dataset;
            let times_token = timestamp.split(':').map(x => Number(x)); // HH:MM:SS  -> [HH, MM, SS] and converting them to number
            
            // convert Minutes to seconds add seconds
            let total_seconds = times_token[0] * 60 + times_token[1]
            

            // vimeo_player.pause() // if you want to stop the loading spinner
            vimeo_player.setCurrentTime(total_seconds)
            // vimeo_player.play()
        })
      })

    </script>
  </body>
</html>

更多信息

© www.soinside.com 2019 - 2024. All rights reserved.