Question

所以我对Html / Javascript很新，我试图将一个播放器从youtube中获取一个播放列表并生成一个Videoplayer +缩略图。

我通过Netbeans 8.0.2运行它，但是有时候我会得到想要的结果（缩略图会加载）但是大多数时候我什么都没得到。

这是我的代码：

编辑：在IE，Chrome，Firefox（全部都是最新的）中尝试过。有时候我基本上什么都没改变（将一个变量向下移动1行，它突然起作用..一次）

 <!DOCTYPE html>
<html>
    <head>
        <title>F this S</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body> 
<a name="ytplayer"></a>
<div id="ytplayer_div2"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<script type="text/javascript"> 

  var string;
  var ytplayer_playlist = [ ];
  var ytplayer_playitem = 0;
  swfobject.addLoadEvent( ytplayer_render_player );
  swfobject.addLoadEvent( ytplayer_render_playlist );
  function ytplayer_render_player( )
  {
    swfobject.embedSWF
    (
      'http://www.youtube.com/v/' + ytplayer_playlist[ ytplayer_playitem ] + '&enablejsapi=1&rel=0&fs=1&version=3',
      'ytplayer_div1',
      '440',
      '330',
      '10',
      null,
      null,
      {
        allowScriptAccess: 'always',
        allowFullScreen: 'true'
      },
      {
        id: 'ytplayer_object'
      }
    );
  }
  function ytplayer_render_playlist( )
  {
    for ( var i = 0; i < ytplayer_playlist.length; i++ )
    {
      var img = document.createElement( "img" );
      img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[ i ] + "/default.jpg";
      var a = document.createElement( "a" );
      a.href = "#ytplayer";
      a.onclick = (
        function( j )
        {
          return function( )
          {
            ytplayer_playitem = j;
            ytplayer_playlazy( 1000 );
          };
        }
      )( i );
      a.appendChild( img );
      document.getElementById( "ytplayer_div2" ).appendChild( a );
    }
  }
  function ytplayer_playlazy( delay )
  {
    if ( typeof ytplayer_playlazy.timeoutid !== 'undefined' )
    {
      window.clearTimeout( ytplayer_playlazy.timeoutid );
    }
    ytplayer_playlazy.timeoutid = window.setTimeout( ytplayer_play, delay );
  }
  function ytplayer_play( )
  {
    var o = document.getElementById( 'ytplayer_object' );
    if ( o )
    {
      o.loadVideoById( ytplayer_playlist[ ytplayer_playitem ] );
    }
  }

  function onYouTubePlayerReady( playerid )
  {
    var o = document.getElementById( 'ytplayer_object' );
    if ( o )
    {
      o.addEventListener( "onStateChange", "ytplayerOnStateChange" );
      o.addEventListener( "onError", "ytplayerOnError" );

    }

  }
  function ytplayerOnStateChange( state )
  {
    if ( state === 0 )
    {
      ytplayer_playitem += 1;
      ytplayer_playitem %= ytplayer_playlist.length;
      ytplayer_playlazy( 5000 );

    }
  }

  function ytplayerOnError( error )
  {
    if ( error )
    {
      ytplayer_playitem += 1;
      ytplayer_playitem %= ytplayer_playlist.length;
      ytplayer_playlazy( 5000 );
    }
  }






</script>

<button onclick="urlAusgabeFunktion()"> Go </button>
        <input type="text" name="txtJob" id="PlaylistUrl" value="PLAYLIST ID HERE">
        <script>
        function urlAusgabeFunktion() 
        {
            gapi.client.setApiKey('API KEY HERE ');
            gapi.client.load('youtube', 'v3', function() {

                var request = gapi.client.youtube.playlistItems.list({
                    part: 'snippet',
                    playlistId: document.getElementById("PlaylistUrl").value,
                    maxResults: 50
                });

                request.execute(function(response) {
                    for (var i = 0; i < response.items.length; i++) 
                    {
                        string = response.items[i].snippet.resourceId.videoId;
                        ytplayer_playlist.push(string);


                    }
                   swfobject.addLoadEvent( ytplayer_render_player );
                   swfobject.addLoadEvent( ytplayer_render_playlist );
                });

            });  

        }

    </script>

   <script src="https://apis.google.com/js/client.js?onload=onGoogleLoad"></script>

Html5 / Javascript以神秘的方式工作？

0 个答案: