Question

尝试获取YT iframe以动态更改视频。当前使用静态视频ID，希望用户通过表单输入一个ID。 onPlayerReady函数调用另一个initalize（）函数，该函数获取表单数据的值并将其记录下来。提交按钮onclick也会调用此初始化函数。但是，单击“提交”按钮后，页面将刷新，并且var的值消失了，因此无法记录并用于重新加载iframe。关于如何解决这个问题有任何想法吗？

Answer 1

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

示例：

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

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

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

如果您仍要使用Submit，则可能需要以某种方式保存输入。但我不建议这样做，因为它不友好，无法更新页面只是为了更改src。

修改
我把一些东西放在一起，行得通。此代码段将更新src，而无需刷新任何寻呼机/ 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，Google会提供一个有用的boilerplate来帮助您入门。

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

1 个答案: