如何实现每年每日展示不同的嵌入YouTube视频？

我已经钻研数月仍未解决这个问题：我有一个包含365个视频的播放列表，希望把每个视频和一年中的每一天对应起来，展示在网站上用来激励项目里的孩子。

目前进展 #

• 我需要用Moment.js处理日期，已经了解了用它操作日期的方法
• 有人给了我一段脚本，但完全不知道怎么实现：

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = mm + '/' + dd + '/' + yyyy;


if(today == "07/07/2022"){
$("iframe").attr('src','https://www.youtube.com/embed/z7plt65m0Ts');
}else if(today == "08/29/21"){
$("iframe").attr('src','some another video url');
}else if(today == "08/30/21"){
$("iframe").attr('src','some another video url');
}

• 我还找到一篇介绍如何根据日期显示/隐藏div的文章，但不知道怎么扩展到一年的每一天

解决方案 #

1. 用Moment.js简化日期处理 #

引入Moment.js后，它能直接获取今天是一年中的第几天（范围1-365/366），彻底避免写365个if-else判断的繁琐。

2. 建立视频映射表 #

创建一个数组，索引对应一年中的天数（注意数组索引从0开始，所以第1天对应索引0），每个元素存放对应日期的视频嵌入链接：

// 示例：按顺序填入365个视频链接
const videoMap = [
  "https://www.youtube.com/embed/day1-video", // 第1天
  "https://www.youtube.com/embed/day2-video", // 第2天
  // ... 依次填入剩下的363个视频链接
];

3. 核心逻辑实现 #

通过Moment.js获取当天的年中天数，直接从映射表中取对应视频链接，更新iframe的地址：

// 获取今天是一年中的第几天（1-365）
const dayOfYear = moment().dayOfYear();
// 数组索引减1匹配对应视频
const targetVideo = videoMap[dayOfYear - 1];
// 更新iframe的播放链接
$("iframe").attr('src', targetVideo);

4. 闰年处理 #

如果遇到闰年，第366天可以单独设置视频，或者复用第365天的内容：

const dayOfYear = moment().dayOfYear();
let targetVideo;

if (dayOfYear === 366) {
  // 闰年第366天的专属视频链接
  targetVideo = "https://www.youtube.com/embed/leap-day-video";
} else {
  targetVideo = videoMap[dayOfYear - 1];
}

$("iframe").attr('src', targetVideo);

5. 初始化与容错 #

• 确保页面加载完成后再执行脚本，用jQuery的$(document).ready()包裹
• 为避免数组缺失链接导致出错，添加默认视频兜底：

$(document).ready(function() {
  const videoMap = [/* 你的365个视频链接数组 */];
  const dayOfYear = moment().dayOfYear();
  let targetVideo = videoMap[dayOfYear - 1];

  // 如果没有对应链接，使用默认视频
  if (!targetVideo) {
    targetVideo = "https://www.youtube.com/embed/default-video";
  }

  $("iframe").attr('src', targetVideo);
});

内容的提问来源于stack exchange，提问作者Jon Sanders