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

Submit youtube playlist id and load playlist from id

本文关键字：id 播放列表 加载 并从 youtube 提交      更新时间：2023-09-26

我正试图弄清楚如何将youtube播放列表ID放入文本输入中并提交，以便页面从输入中加载播放列表ID。

HTML

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

Javascript

function myFunction() {
var PID = document.getElementById("myText");
var theName = PID.value;
    }
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
      }

我想我必须让它重新加载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>
相关文章：