如何在视频中添加超链接答案

【问题标题】：How to put hyperlinks on video如何在视频中添加超链接
【发布时间】：2018-05-24 09:10:08
【问题描述】：

我需要向视频添加可点击链接（例如 youtube 上不再可用的注释）。

所以，我需要插入一些文本，当我点击它时，我需要被发送到另一个页面。

此文字必须仅在视频的特定部分可见。

我该怎么做？

【问题讨论】：

我们需要更多的上下文。你是如何显示视频的，里面的视频是什么，视频帧应用了哪些样式？
您使用的是视频标签还是其他的东西？您需要一个可操作的按钮吗？

标签： javascript video hyperlink html5-video

【解决方案1】：

您只需为视频创建一个包装器作为叠加层即可放置元素。检查这个：

$('.skipper').on('click', () => {
  console.log('Button clicked');
})

.videowrapper {
  position: relative;
  display: inline-block;
}
.skipper {
  position: absolute;
  bottom: 20px;
  right: 0;
  border:0;
  background: black;
  color:white;
  opacity: 0.7;
  cursor: pointer;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videowrapper">
<video style="width: 400px;"><source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_2mb.mp4"></video>
<button class="skipper">SKIP AD</button>
</div>

【讨论】：

这行得通，但是通过这种方式，我可以在整个视频期间看到该按钮，但我需要在特定时刻显示它。
具体时刻？复数？那么你将需要实现一个逻辑。使用视频事件侦听器并让按钮在 x 秒后、x 秒内……等等可见。
是的，是否有指南或我可以遵循的东西来创建事件侦听器？
Google 是你最好的朋友 :D developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events