将DIVs映射到Vimeo/Youtube时间戳

将DIVs映射到Vimeo或YouTube的时间戳通常是为了创建一个交互式的视频播放体验，其中用户可以点击不同的DIV元素来跳转到视频中的特定时间点。以下是这个过程的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

时间戳：视频中的一个具体时刻，通常以秒为单位。
DIV元素：HTML中的一个块级元素，用于布局和样式。
映射：将DIV元素与视频的时间戳关联起来，使得点击DIV时视频能够跳转到对应的时间点。

优势

用户体验：用户可以通过点击不同的部分快速跳转到视频的相关内容。
导航：为长视频提供直观的章节导航。
互动性：增加视频内容的互动性和参与感。

类型

静态映射：预先定义好每个DIV对应的时间戳。
动态映射：根据视频内容或用户行为动态生成时间戳映射。

应用场景

教程视频：用户可以跳转到特定的教学步骤。
产品演示：突出显示产品的不同功能部分。
故事叙述：引导观众关注故事的特定章节。

实现方法

以下是一个简单的示例，展示如何使用JavaScript和YouTube的iframe API来实现这一功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Timestamp Mapping</title>
<style>
  .timestamp {
    cursor: pointer;
    margin: 10px;
    padding: 5px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>

<div id="videoContainer">
  <iframe id="youtubeVideo" width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="timestamp" data-timestamp="10">Section 1 (0:10)</div>
<div class="timestamp" data-timestamp="30">Section 2 (0:30)</div>
<div class="timestamp" data-timestamp="60">Section 3 (1:00)</div>

<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('youtubeVideo');
  }

  document.querySelectorAll('.timestamp').forEach(function(div) {
    div.addEventListener('click', function() {
      var timestamp = this.getAttribute('data-timestamp');
      player.seekTo(timestamp, true);
    });
  });
</script>

</body>
</html>

可能遇到的问题和解决方案

视频未加载完成：如果视频还未完全加载，seekTo可能不会准确跳转。解决方案是在视频的onReady事件中绑定点击事件。
跨域问题：如果视频和页面不在同一个域，可能会遇到跨域限制。确保所有资源都在同一域下或者正确设置了CORS。
API限制：YouTube的iframe API可能有调用频率限制或其他限制。查阅官方文档了解具体限制并遵守。

通过上述方法，你可以有效地将DIV元素映射到Vimeo或YouTube视频的时间戳，从而提升用户体验和互动性。

页面内容是否对你有帮助？

有帮助

没帮助

将DIVs映射到Vimeo/Youtube时间戳

、、、、

我目前正在尝试将一些div映射到Vimeo/Youtube视频的不同时间戳，并跳转到特定的时间戳。我知道通过将视频直接嵌入到超文本标记语言中，我可以在JS中使用currentTime来跟踪和操作时间戳。但是，Youtube/Video视频也有类似的东西吗?如果有，我该怎么做？非常感谢。

浏览 22提问于2019-03-04得票数 0

2回答

解析各大视频流媒体网站的URL，生成合适的代码进行嵌入

、、、

在tumblr.com上发布视频后，你只需将视频的网址粘贴到youtube、vimeo等网站上，tumblr就会自动为你嵌入视频。

浏览 1提问于2009-07-10得票数 0

1回答

如何使用不同的API Javascript映射日期

、、

如何在不同的接口(如YouTube、Vimeo)中使用date？在状态中，我有一个包含对象的表，对象是不同的。我将这个表映射到Component。YouTube标题的路径： const title = props.item.snippet.localized.title; Vimeo标题的路径： const title = props.item.name

浏览 14提问于2021-07-22得票数 0

回答已采纳

4回答

(来自Vimeo或其他地方)

、、

创建一个动画GIF软件存在转换从视频到动画GIF，但你失去了它的大部分图像调色板，并结束与大数据文件。

浏览 0提问于2011-02-22得票数 3

回答已采纳

1回答

我正在使用一个Vimeo视频嵌入(iFrame嵌入代码从他们的网站)在我的网站上，我需要视频自动停止在一个特定的时间戳(我将在这里使用6秒)，每当我的网站用户播放视频。时间戳之后的内容是不必要的。但与YouTube不同的是，Vimeo似乎没有一种简单的方式来为你从视频中嵌入的视频设置结束时间。不幸的是，我不拥有视频，所以我不能直接编辑视频，所以我相信JavaScript解决方案是最好的选择。下面是我在我的站点上使用的来自Vimeo的上

浏览 10提问于2022-05-24得票数 0

回答已采纳

1回答

有没有办法从媒体的远程视频中提取“描述”元数据？

我们有一个Drupal 9网站，正在使用媒体的远程视频为YouTube视频。我们需要提取YouTube视频的描述，但我看不出有什么方法可以做到这一点。最终结果将是在视图中显示YouTube描述。

浏览 0提问于2021-11-02得票数 1

1回答

是否在录制时上传图像？维梅奥

、

我想实现一个上传视频到vimeo的功能。我已经在使用他们的拉取请求方法来上传视频了。但是vimeo和视频上传需要大约20到30秒的时间来上传和编码30秒的视频。这一次我想克服。vimeo是否提供了在录制时上传视频的方法？我可以通过video js record (时间戳事件)每隔2秒获取一次视频的二进制数据。因此，我正在尝试找到一种方法来上传这个二进制数据到vimeo，并在上传后将视频标记为完成。

浏览 20提问于2019-01-21得票数 0

2回答

从嵌入的youtube视频中获取当前时间戳

、、、

有没有人知道一个可以在youtube上播放视频的免费的flowplayer插件？如果我只是将youtube视频嵌入到我的网页中，是否可以获得youtube视频的当前时间戳。我希望用户能够点击一个按钮，记录正在播放的视频的当前时间戳。谢谢

浏览 3提问于2012-08-03得票数 2

1回答

Neo4j:将不同节点链接到一个节点

、、

假设您有以下4个节点：集合2：(行为：“事件日志”，时间戳: 149100) (行为：“正常时间报告”，时间戳: 149100) 我试图找出如何将每一组节点映射到一个节点。我尝试了下面的Cypher，但是所有4个节点都只映射到一个节点，(a)而不是分别

浏览 1提问于2018-10-11得票数 0

回答已采纳

1回答

在YouTube API中检测事件源

、、

我在一个用创建的网页上有一个youtube播放器var player; function onYouTubeIframeAPIReady

浏览 2提问于2013-12-03得票数 7

回答已采纳

2回答

在使用时限制API调用？

、、

我正在使用Vimeo (和AVPro视频插件)构建一个使用Vimeo(和AVPro视频插件)的视频流的移动应用程序。

浏览 0提问于2018-12-28得票数 0

2回答

java对象字段在实例化时等于另一个字段

、、

我正在将json列表映射到java对象列表。我映射到的类有一个额外的时间域(本地时间)。在映射到类时，我需要根据传入的UTC值分配一个本地时间。我可以理解为什么会发生这种情况(首先调用构

浏览 1提问于2018-12-10得票数 0

回答已采纳

2回答

如果嵌入的vimeo视频已经开始播放，为什么它会在jquery cycle插件中消失？

、、

我正在尝试使用jquery cycle插件在幻灯片中显示一些嵌入的Vimeo视频，用户可以手动浏览。我在YouTube上尝试了类似的东西，看看是不是iframe/视频问题，这也不起作用，但幻灯片没有变白，它似乎只显示了一个黑色的YouTube播放器，没有内容或控件(但音频仍在播放)：。

浏览 0提问于2012-07-11得票数 0

1回答

使用时间戳根据月份Python划分列表

、、、

我想按月号1将时间戳列表映射到12[1231469744, 1231470173, 1231470988, 1231471428, 1545730073]{1: [1231469744

浏览 1提问于2021-10-06得票数 0

回答已采纳

2回答

如何像Youtube一样在颤栗中展示时间

、、

我正在编写一个应用程序，用Youtube API V3克隆Youtube的一些功能。 4周前

浏览 0提问于2020-07-13得票数 5

回答已采纳

1回答

sqlSave:将dataframe时间戳映射到Server时间戳

、、、

我正试图使用sqlSave()将一个数据帧上传到sql server中的一个表中。这个数据帧中有一个时间戳，我想将时间戳col映射到sqlserver中的timestamp。我有两个问题。1.它将数据帧的时间戳映射到浮点。2. --它创建了一个表，但是没有上传任何数据，我会得到一个错误。Microsoft][ODBC SQL Server Driver]Invalid character value for cast specifi

浏览 0提问于2011-12-15得票数 13

回答已采纳

2回答

替换通过B值链接的两个映射( Map<A、B>、Map<B、C> )的Java数据结构

、

我在Java中有一个简单的缓存系统，它用时间戳(Long)映射对象id (Long)，将后者映射到List<Object>。PS:在我的示例中，我将时间戳映射到一个Object实例列表，但有时我只将时间戳映射到一个简单的Object。

浏览 7提问于2014-07-28得票数 0

回答已采纳

2回答

Android vimeo视频下载程序

、、、

我想在VideoView上播放vimeo的视频，但这里有问题。在桌面下载视频的步骤如下(基于ossguy.com脚本)：解析网页并获得签名和时间戳。以player.vimeo.com/play_redirect?5e23c571c4032abd7507368237f43a2a&time=1378707147&quality=hd&&codecs=H264,VP8,VP

浏览 2提问于2013-09-09得票数 1

回答已采纳

1回答

Cassandra在协调世界时插入时间戳

、、

我有带有时间戳(UTC时间)的json日志。我将键和值映射到Cassandra表键并插入记录。但是，Cassandra通过从时间戳中减去5小时，再次将已经在UTC的时间戳转换为UTC。这里的时区是(格林尼治时间+ 5)。cqlsh> INSERT INTO myTable (id,time) VAlUES (abc123, 2018-01-12T12:32:31); 现在时间

浏览 1提问于2018-04-26得票数 1

回答已采纳

1回答