我不是专业程序员,请怜悯我!
我会链接到使用 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&autopause=0&player_id=0&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>
============
谢谢!
您可以使用 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&autopause=0&player_id=0&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>