Question

我试图找出如何弄清楚如何在文本输入中输入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，但我不确定该怎么做。我该怎么办？

Answer 1

我相信最好使用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>

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

1 个答案: