网页视频播放器：如何基于标签匹配展示下方相关视频？

第一步：修复原有代码的语法错误 #

原代码存在两处语法问题，需先修正才能正常运行：

• video2对象中url属性末尾缺失逗号，导致对象结构报错
• loadVideoPage()调用放在函数内部的if块中，会触发无限递归，且函数的if块与函数本身未闭合大括号

修复后的基础代码：

const allVideos = [
  {
    id: "video1",
    title: "Video 1",
    preview: "video1-preview.jpg",
    url: "video URL goes here",
    tags: ["action", "adventure"]
  },
  {
    id: "video2",
    title: "Video 2",
    preview: "video2-preview.jpg",
    url: "video URL goes here", // 补上缺失的逗号
    tags: ["thriller", "mystery"]
  },
];

function getUrlParameter(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

function loadVideoPage() {
  const videoId = getUrlParameter('videoId');
  const mainVideo = allVideos.find(video => video.id === videoId);
  if (mainVideo) {
    // 加载主视频
    const mainVideoElement = document.getElementById('main-vid');
    mainVideoElement.src = mainVideo.url;
    // 设置视频标题
    const videoTitleElement = document.querySelector('.vid-name');
    videoTitleElement.textContent = mainVideo.title;
    // 更新标签数据
    document.getElementById('tags').dataset.tags = mainVideo.tags.join(',');

    // 调用加载相关视频的函数
    loadRelatedVideos(mainVideo);
  }
}

// 在函数外部调用，避免递归
loadVideoPage();

第二步：实现标签匹配的相关视频筛选逻辑 #

编写函数筛选出与当前视频标签有交集的视频（排除当前视频本身）：

function getRelatedVideos(currentVideo) {
  return allVideos.filter(video => {
    // 排除当前播放的视频
    if (video.id === currentVideo.id) return false;
    // 检查是否存在共同标签
    return video.tags.some(tag => currentVideo.tags.includes(tag));
  });
}

第三步：生成推荐视频的DOM元素并插入页面 #

编写函数将筛选出的相关视频渲染到#suggest-video容器中：

function loadRelatedVideos(currentVideo) {
  const relatedVideos = getRelatedVideos(currentVideo);
  const container = document.getElementById('suggest-video');
  
  // 清空容器原有内容
  container.innerHTML = '';

  relatedVideos.forEach(video => {
    // 创建视频卡片容器
    const videoCard = document.createElement('div');
    videoCard.className = 'related-video-card'; // 添加类名方便后续样式控制

    // 创建预览图
    const previewImg = document.createElement('img');
    previewImg.src = video.preview;
    previewImg.alt = `${video.title} 预览图`;

    // 创建视频标题
    const titlePara = document.createElement('p');
    titlePara.textContent = video.title;

    // 组装卡片并添加到容器
    videoCard.appendChild(previewImg);
    videoCard.appendChild(titlePara);
    container.appendChild(videoCard);
  });
}

完整整合代码 #

将所有功能整合后的完整实现：

const allVideos = [
  {
    id: "video1",
    title: "Video 1",
    preview: "video1-preview.jpg",
    url: "video URL goes here",
    tags: ["action", "adventure"]
  },
  {
    id: "video2",
    title: "Video 2",
    preview: "video2-preview.jpg",
    url: "video URL goes here",
    tags: ["thriller", "mystery"]
  },
  // 可添加更多视频测试匹配逻辑
  {
    id: "video3",
    title: "Video 3",
    preview: "video3-preview.jpg",
    url: "video URL goes here",
    tags: ["action", "mystery"]
  }
];

function getUrlParameter(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

function getRelatedVideos(currentVideo) {
  return allVideos.filter(video => {
    if (video.id === currentVideo.id) return false;
    return video.tags.some(tag => currentVideo.tags.includes(tag));
  });
}

function loadRelatedVideos(currentVideo) {
  const relatedVideos = getRelatedVideos(currentVideo);
  const container = document.getElementById('suggest-video');
  container.innerHTML = '';

  relatedVideos.forEach(video => {
    const videoCard = document.createElement('div');
    videoCard.className = 'related-video-card';

    const previewImg = document.createElement('img');
    previewImg.src = video.preview;
    previewImg.alt = `${video.title} 预览图`;

    const titlePara = document.createElement('p');
    titlePara.textContent = video.title;

    videoCard.appendChild(previewImg);
    videoCard.appendChild(titlePara);
    container.appendChild(videoCard);
  });
}

function loadVideoPage() {
  const videoId = getUrlParameter('videoId');
  const mainVideo = allVideos.find(video => video.id === videoId);
  if (mainVideo) {
    const mainVideoElement = document.getElementById('main-vid');
    mainVideoElement.src = mainVideo.url;

    const videoTitleElement = document.querySelector('.vid-name');
    videoTitleElement.textContent = mainVideo.title;

    document.getElementById('tags').dataset.tags = mainVideo.tags.join(',');

    loadRelatedVideos(mainVideo);
  }
}

loadVideoPage();

进阶优化（可选） #

如果需要按标签匹配数量排序（匹配越多越靠前），可修改getRelatedVideos函数：

function getRelatedVideos(currentVideo) {
  return allVideos
    .filter(video => video.id !== currentVideo.id)
    .map(video => {
      // 计算匹配的标签数量
      const matchCount = video.tags.filter(tag => currentVideo.tags.includes(tag)).length;
      return { ...video, matchCount };
    })
    .filter(video => video.matchCount > 0)
    .sort((a, b) => b.matchCount - a.matchCount); // 按匹配数量降序排列
}

内容的提问来源于stack exchange，提问作者Smart Flamz