2015-10-16 5 views
0

У меня есть этот код, который создает iframe для моего видео youtube , но я не уверен, как показать миниатюру, так как сейчас это только показывают черный ящик и после Я нажимаю на него, чтобы начать воспроизведение видео.API-интерфейс YouTube IFrame Thumbnails не отображается

Я попробовал player.cueVideoById ('eJSik6ejkr0', 0, 'highres'), но все еще нет.

любая идея, что я могу сделать, чтобы сделать миниатюру видимой?

благодарит

 player = new YT.Player('player', { 
 
      height: '475', 
 
      width: '100%', 
 
      videoId: 'eJSik6ejkr0', 
 
\t \t playerVars: { 'rel': 0, 'modestbranding': 1, 'autoplay': 1, 'controls': 0 }, 
 
      events: { 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
     });

+0

Когда я использую ваш фрагмент внутри ответа ниже, я получаю 'This содержит содержимое от VEVO. Он ограничен воспроизведением на определенных сайтах. Это объясняет, почему вы не получаете палец большого пальца. – Jaco

ответ

0

Это пример, приведенный в Youtube Player API и правильно показывает эскиз. Однако некоторые контент-провайдеры ограничивают playblack на определенных сайтах, и поэтому вы можете получить эскиз. Использование VideoID я получаю черный ящик с этим сообщением в середине: This contains content from VEVO. It is restricted from playback on certain sites

< !DOCTYPE html> 
 
    < html> 
 
    < body> 
 
     <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
 
     < div id="player"> 
 
     < /div> 
 

 
      <script> 
 
      // 
 
      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: 'M7lc1UVf-VE', 
 
       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(); 
 
       } < /script> 
 
    </body > 
 
       < /html>

0

нормально, мне это удалось ...

Vevo просто пример (плохой) ... У меня было 5 видеороликов (основное и 4 небольших видео) на странице, и я использовал метод pausedVideo на всех 4 маленьких видеороликах сразу после того, как основное видео было запущено, поэтому они сделали все «черным».

сейчас все в порядке, спасибо за помощь!