Question

我正在使用此代码为我的YouTube视频创建iframe 但是我不太确定如何显示缩略图，就像现在它一样显示一个黑匣子，点击后视频开始播放。

我试过了player.cueVideoById（＆＃39; eJSik6ejkr0＆＃39;，0，＆＃39; highres＆＃39;）但仍然没有。

我知道如何才能使缩略图可见？

感谢

＆＃13;

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

＆＃13;

Answer 1

这是Youtube Player API中给出的示例，并正确显示缩略图。但是，某些内容提供商会限制播放到某些网站，因此您可能会获得缩略图。使用你的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>

Answer 2

好的，我设法了......

vevo只是一个例子（糟糕的一个）...我在页面上有5个视频（主要的一个和4个小视频），我在主视频运行后立即在所有4个小视频上使用了pausedVideo方法它让他们一切顺利＆＃34;黑色＆＃34;。

现在很好，谢谢你的帮助！

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

2 个答案: