如何实现类似YouTube已停用注释的视频指定时段可点击超链接

Hey there! Great question—now that YouTube’s annotation feature is gone, a lot of creators and developers are hunting for ways to add clickable, time-specific text links to their videos. Let me break down a few practical methods, starting with the most flexible web-based solution.

Option 1: HTML5 Video + Vanilla JavaScript (Best for Web) #

This approach lets you build custom, time-triggered links that work directly in a browser. Here’s how to do it:

Step 1: Set Up the HTML Structure #

First, wrap your video in a relative-positioned container, then add your clickable link (hidden by default) positioned on top of the video:

<div style="position: relative; max-width: 100%; margin: 0 auto;">
  <video id="myVideo" controls width="100%">
    <source src="your-video-file.mp4" type="video/mp4">
    Your browser doesn't support HTML5 video.
  </video>
  <!-- Time-bound clickable link -->
  <a 
    id="timedLink" 
    href="https://your-target-page.com" 
    target="_blank"
    style="
      display: none;
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(0,0,0,0.8);
      color: #fff;
      padding: 10px 16px;
      border-radius: 4px;
      text-decoration: none;
      z-index: 10;
      transition: opacity 0.3s ease;
    "
  >
    Click here to learn more!
  </a>
</div>

Step 2: Add the JavaScript Logic #

We’ll listen to the video’s timeupdate event to show/hide the link based on the current playback time:

const video = document.getElementById('myVideo');
const timedLink = document.getElementById('timedLink');

// Define when the link should appear (in seconds)
const linkStart = 7; // Show at 7 second
const linkEnd = 15; // Hide at 15 second

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  
  // Toggle link visibility based on playback time
  if (currentTime >= linkStart && currentTime <= linkEnd) {
    timedLink.style.display = 'block';
    // Optional: Add a fade-in effect
    timedLink.style.opacity = '1';
  } else {
    timedLink.style.opacity = '0';
    // Delay hiding to let the fade-out finish
    setTimeout(() => {
      timedLink.style.display = 'none';
    }, 300);
  }
});

For Multiple Links #

If you need multiple links that appear at different times, you can manage them with an array:

const linksConfig = [
  {
    element: document.getElementById('link1'),
    start: 3,
    end: 8,
    url: 'https://first-target.com'
  },
  {
    element: document.getElementById('link2'),
    start: 12,
    end: 20,
    url: 'https://second-target.com'
  }
];

video.addEventListener('timeupdate', () => {
  const currentTime = video.currentTime;
  linksConfig.forEach(link => {
    if (currentTime >= link.start && currentTime <= link.end) {
      link.element.style.display = 'block';
      link.element.href = link.url;
    } else {
      link.element.style.display = 'none';
    }
  });
});

Option 2: Video Editing Software (For Exported Videos) #

If you’re creating a video file to share (not embedding it on the web), some professional tools let you add interactive markers:

• Adobe Premiere Pro: Use the "Interactive" panel to add clickable hotspots that trigger at specific timestamps. Note: These only work in supported players (like Adobe Media Player).
• Camtasia: Add "callouts" with link actions that activate during specific time ranges. Exported videos will work in Camtasia’s player or compatible platforms.

Key Tips #

• Z-Index: Make sure your link has a higher z-index than the video to avoid being blocked.
• Fullscreen Handling: If your video supports fullscreen, you’ll need to adjust the link’s positioning (most browsers will maintain the relative positioning in fullscreen mode, but test to be sure).
• Accessibility: Add aria-label to your link for screen readers, and ensure it’s visible enough for all viewers.

Hope this helps you get those time-bound links set up! If you’re working with a specific platform (like a CMS or mobile app), feel free to share more details and I can tweak the approach.

内容的提问来源于stack exchange，提问作者Carlotta Rebonato