YT JS iframe API，使用用户输入值重新加载框架

Question

正在尝试获取 YT iframe 以动态更改视频。当前使用静态视频 ID 并希望用户通过表单输入一个。 onPlayerReady 函数调用另一个 initalize() 函数，该函数获取表单数据的值并将其记录下来。提交按钮 onclick 也调用这个初始化函数。但是，当提交按钮被点击时，页面刷新，var 的值就没有了，无法记录并用于重新加载 iframe。知道我将如何解决这个问题吗？

Answer 1

尝试将输入值直接传递给更改 iframe src 的函数，而不是使用提交。

示例：

var userSrc = document.querySelector("#yourInputId");

if(userSrc.value.length > 1){
   updateSrc(userSrc.value);
}

如果 f.e 在输入中使用占位符或任何会影响长度的内容，则需要调整代码。

如果您仍想使用提交，您可能需要以某种方式保存您的输入。但我不推荐它，因为更新页面只是为了更改 src 不是用户友好的。

编辑
我把一些东西快速放在一起，那行得通。此代码片段将更新 src 而无需任何 pager/iframe 刷新。您可能还想在播放器加载到 DOM 后加载函数，为此您可以创建一个条件来检查播放器状态（此函数随 Google 的样板一起提供文档）。

function loadVid(){
  var videoId = document.querySelector("input[name=vidId").value;

  if(videoId.length > 0){
    player.loadVideoById(videoId);
  } else {
      alert("You need to enter an video id");
    }
}

Google 有一个有用的 boilerplate 可以帮助您入门，如果您还没有检查过的话。

YT JS iframe API，使用用户输入值重新加载框架

YT JS iframe API, reload frame with user input value

javascript

youtube-api

youtube-iframe-api