Javascript 提交youtube播放列表id并从id加载播放列表_Javascript_Youtube Api

Javascript 提交youtube播放列表id并从id加载播放列表

javascript youtube-api

Javascript 提交youtube播放列表id并从id加载播放列表,javascript,youtube-api,Javascript,Youtube Api,我想知道如何在文本中输入youtube播放列表ID并提交，以便页面从输入中加载播放列表ID HTML <div id="player"></div> <input id="myText" type="text"> <input type="button" value="Submit" onClick="myFunction()"> 我想我必须让它重新加载iframe，但我不确定该怎么做。我应该如何进行我认为最好使用iframe嵌入而不是div，

我想知道如何在文本中输入youtube播放列表ID并提交，以便页面从输入中加载播放列表ID

HTML

<div id="player"></div>
<input id="myText" type="text">
<input type="button" value="Submit" onClick="myFunction()">

我想我必须让它重新加载iframe，但我不确定该怎么做。我应该如何进行

我认为最好使用iframe嵌入而不是div，因为您可以更好/更容易地控制传递参数，例如视频id。因此我认为这可能是您想要的：

<body>
<iframe  id="player" width="600" height="400" src="https://www.youtube.com/embed/?wmode=transparent&enablejsapi=1" wmode="Opaque" frameborder="0" allowfullscreen></iframe>

<input id="myText" type="text">
<input type="button" value="Submit" onClick="myFunction()">
<script>
function myFunction() {
var PID = document.getElementById("myText");
var theName = PID.value;
 document.getElementById("player").setAttribute("src", 'https://www.youtube.com/embed/'+theName+'?autoplay=1&wmode=transparent&enablejsapi=1');

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

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      playerVars: { 
      listType:'playlist',
      list: 'theName'
            },
      height: '720',
      width: '1280',
      videoId: '',
      events: {
        'onReady': onPlayerReady}
    });
  }


 function onPlayerReady(event) {
    event.target.setShuffle(true);//here is the function
      }
      </script>


函数myFunction（）{
var PID=document.getElementById（“myText”）；
var theName=PID.value；
document.getElementById（“播放器”）.setAttribute（“src”，”https://www.youtube.com/embed/“+theName+”？自动播放=1&wmode=transparent&enablejsapi=1’；
player.playVideo（）；；
}
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
playerVars:{
列表类型：'playlist'，
列表：“名称”
},
高度：'720'，
宽度：“1280”，
videoId:“”，
活动：{
“onReady”：onPlayerReady}
});
}
函数onPlayerReady（事件）{
event.target.setShuffle（true）；//函数如下
}

我认为最好使用iframe嵌入而不是div，因为您可以更好/轻松地控制传递参数，如视频id。因此我认为这可能是您想要的：

<body>
<iframe  id="player" width="600" height="400" src="https://www.youtube.com/embed/?wmode=transparent&enablejsapi=1" wmode="Opaque" frameborder="0" allowfullscreen></iframe>

<input id="myText" type="text">
<input type="button" value="Submit" onClick="myFunction()">
<script>
function myFunction() {
var PID = document.getElementById("myText");
var theName = PID.value;
 document.getElementById("player").setAttribute("src", 'https://www.youtube.com/embed/'+theName+'?autoplay=1&wmode=transparent&enablejsapi=1');

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

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      playerVars: { 
      listType:'playlist',
      list: 'theName'
            },
      height: '720',
      width: '1280',
      videoId: '',
      events: {
        'onReady': onPlayerReady}
    });
  }


 function onPlayerReady(event) {
    event.target.setShuffle(true);//here is the function
      }
      </script>


函数myFunction（）{
var PID=document.getElementById（“myText”）；
var theName=PID.value；
document.getElementById（“播放器”）.setAttribute（“src”，”https://www.youtube.com/embed/“+theName+”？自动播放=1&wmode=transparent&enablejsapi=1’；
player.playVideo（）；；
}
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/iframe_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'player'{
playerVars:{
列表类型：'playlist'，
列表：“名称”
},
高度：'720'，
宽度：“1280”，
videoId:“”，
活动：{
“onReady”：onPlayerReady}
});
}
函数onPlayerReady（事件）{
event.target.setShuffle（true）；//函数如下
}