YouTube IFrame播放器API缩略图未显示

I'm having this code that create the iframe for my youtube video but I'm not so sure how to show the thumbnail, as for now it's just show a black box and after I click it the video start playing.

我有这个为我的youtube视频创建iframe的代码,但我不太确定如何显示缩略图,因为现在它只是显示一个黑盒子,然后我点击它后视频开始播放。

I tried player.cueVideoById('eJSik6ejkr0',0,'highres') but still none.

我尝试了player.cueVideoById('eJSik6ejkr0',0,'highres'),但仍然没有。

any idea what could I do to make the thumbnail visible?

任何想法我可以做些什么来使缩略图可见?

thanks

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

2 个解决方案

#1

This is the example given in the Youtube Player API and correctly shows a thumbnail. However, some content providers will limit playblack to certain sites and therefore you may get a thumbnail. Using your videoId i get a black box with this message in the middle: This contains content from VEVO. It is restricted from playback on certain sites

这是Youtube Player API中给出的示例,并正确显示缩略图。但是,某些内容提供商会限制播放到某些网站,因此您可能会获得缩略图。使用你的videoId我得到一个带有此消息的黑框:这包含来自VEVO的内容。限制在某些网站上播放

< !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>

#2

ok I managed it...

好的我管理好了......

the vevo was just an example (bad one)... I had 5 videos (main one and 4 small videos) on the page and I used the pausedVideo method on all 4 small vids right after the main video was running so it made them all goes "black".

vevo只是一个例子(糟糕的一个)...我在页面上有5个视频(主要的一个和4个小视频),我在主视频运行后立即在所有4个小视频上使用了pausedVideo方法,因此它制作了它们一切都变成了“黑色”。

now it's fine, thanks for the help!

现在很好,感谢您的帮助!