iframe切换视频分段无法播放，报TypeError错误求助

核心错误原因 #

• 事件绑定时机错误：页面初始化时执行querySelectorAll(".alnk")，此时动态生成的分段链接还未被创建，导致这些链接没有绑定点击事件。
• 错误调用iframe的play()方法：<iframe>元素本身不存在play()方法，该方法属于<video>元素，强行调用会触发类型错误。
• 数组索引遗漏：循环从i=1开始，会跳过urls[0]对应的第一个视频链接，同时循环终止条件i < numVideos会遗漏最后一个链接。

分步修复代码 #

修复后的完整JS代码 #

const linkContainer = document.querySelector(".prtd");
const videoPlayer = document.getElementById("iframe");
const mrElement = document.getElementById("mr");
const downloadOptions = document.getElementById("download-options");
downloadOptions.style.display = "none";

// 加载并生成视频分段链接
fetch('urls.txt')
  .then(response => response.text())
  .then(data => {
    const urls = data.split('\n').filter(Boolean);
    // 用forEach遍历数组，确保所有链接都被生成
    urls.forEach((url, index) => {
      const link = document.createElement("a");
      link.className = "alnk";
      link.setAttribute("data-src", url);
      link.textContent = `Part ${index + 1}`;
      linkContainer.appendChild(link);
    });
  });

// 使用事件委托处理动态生成的链接点击
linkContainer.addEventListener("click", function(e) {
  // 判断点击的元素是分段链接
  if (e.target.classList.contains("alnk")) {
    const src = e.target.getAttribute("data-src");
    // 若需自动播放，可尝试给src追加平台支持的autoplay参数（例：${src}&autoplay=1）
    videoPlayer.setAttribute("src", src);
  }
});

// 其他功能代码保持不变
$("#mr").click(function () {
  $(".trant").toggleClass("trant-active");
});

mrElement.addEventListener("click", function () {
  downloadOptions.style.display = downloadOptions.style.display === "none" ? "block" : "none";
});

修复说明 #

1. 事件委托：通过父容器.prtd监听点击事件，无论元素是静态还是动态生成，只要符合.alnk类就能触发切换逻辑，彻底解决动态元素绑定事件失效的问题。
2. 移除错误的play()调用：iframe切换src后，视频播放由内嵌的视频页面控制，无需调用不存在的play()方法；若需要自动播放，可根据视频平台规则给链接追加autoplay参数。
3. 修正数组遍历逻辑：使用forEach遍历所有视频链接，索引从0开始，确保每个链接都被生成，分段编号也能正确对应。

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