Javascript 如何为YouTube API传递变量ID

我是CS的新手，目前正在从事个人项目。我正在创建一个web应用程序，用户可以将YouTube URL复制并粘贴到搜索框中的视频中，然后在单击“观看”后可以在同一网页上观看视频。为了获取视频ID，我使用了正则表达式：

function getId(url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
        const match = url.match(regExp);

        return (match && match[2].length === 11)
          ? match[2]
          : null;
      }

这就是我获取用户输入的方式：

var inputVal = document.getElementById("userInput").value;

要获取视频ID，我正在从用户处调用

inputVal

上的

getId

：

  var newVideoId = getId(inputVal)

下面是用于在我的页面上播放视频的YouTube API。但是，我发现很难将

newVideoId

变量传递到

player

对象下的API

// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
          player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'newVideoId', //the problem lies here
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
          event.target.playVideo();
        }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
            }

//2。此代码异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
// 3. 此函数用于创建（和YouTube播放器）
//API代码下载后。
var播放器；
函数onyoutubeiframeapiredy（）{
player=新的YT.player（'player'{
高度：“390”，
宽度：“640”，
videoId:'newVideoId'，//问题就在这里
活动：{
“onReady”：onPlayerReady，
“onStateChange”：onPlayerStateChange
}
});
}
// 4. 当视频播放器准备就绪时，API将调用此函数。
函数onPlayerReady（事件）{
event.target.playVideo（）；
}
// 5. 当播放器的状态改变时，API调用此函数。
//该功能指示播放视频时（状态=1），
//玩家应该玩六秒钟，然后停下来。
var done=false；
函数onPlayerStateChange（事件）{
如果（event.data==YT.PlayerState.PLAYING&&！done）{
设置超时（停止视频，6000）；
完成=正确；
}
}
函数stopVideo（）{
player.stopVideo（）；
}
}

问题是，单击按钮后，我的屏幕上没有显示任何内容。我能够

console.log

ID；这意味着我从正则表达式中得到了正确的ID

---

如果您能在API中使用用户提供的动态ID，我将不胜感激！感谢

使用提供视频Id的iframe api播放视频，您可以使用以下功能：

loadVideoById({'videoId': 'bHQqvYy5KYo',
           'startSeconds': 5,
           'endSeconds': 60,
           'suggestedQuality': 'large'});

从IFrame播放器API：

此函数用于加载和播放指定的视频

所需的videoId参数指定了视频的YouTube视频ID 要播放的视频。在YouTube数据API中，视频资源的id 属性指定ID。可选的startSeconds参数接受 浮点/整数。如果已指定，则视频将从 距指定时间最近的关键帧。可选的结束时间为秒 参数接受浮点/整数。如果已指定，则显示视频 将在指定时间停止播放

---

这应该可以解决问题。

videoId:newVideoId

（删除引号，这里有文本，没有变量）谢谢。我试过了，但没用！“不起作用”作为问题描述没有多大帮助：）如果加载Youtube播放器的代码在用户填写表单之前运行，这显然不起作用，因为

newVideoId

还不存在。