Question

我的嵌入代码中有rel = 0，所以当视频结束时，它返回到开始。但它返回后显示视频的缩略图，缩略图被炸成全部视频大小，因此图像非常模糊。如何才能显示我上传的用于拇指的完整1280 x 720图像？

由于

Answer 1

例如，您可以检测视频何时结束，然后使用图像覆盖视频。例如：

HTML：

<script src="//www.youtube.com/iframe_api"></script>
<div id='yt_container'>
    <iframe id='element_id' width="853" height="480" src="//www.youtube.com/embed/LqeN31x-5gE?autoplay=1&amp;enablejsapi=1&amp;rel=0&amp;start=248" frameborder="0" allowfullscreen></iframe>
    <!--Seems like people always forget to encode & as &amp;-->
    <!--The "start" parameter was added for easier testing-->
    <!--The `enablejsapi=1` parameter is required for this to work. For more information, see https://developers.google.com/youtube/iframe_api_reference
    <div  id='player_overlay_image'>&nbsp;</div>
</div>

CSS：

iframe,img,div{/*If you use this on a real web page, you will want to make these rules more specific*/
    padding:0;
    margin:0        
}

div#yt_container{
    position:relative;/* https://stackoverflow.com/a/105035/1419007 */
}

div#player_overlay_image{/* The high-resolution image for when your video has ended. Includes a ▶ button. */
    display:block;
    position:absolute;
    top: 29px;
    background: url('//i.imgur.com/JhDUWdI.png');
    width:853px;
    height:408px;
    display: none;
    cursor:pointer;
}

div#player_overlay_image:hover{/* ▶ button in active state. */
    background: url(//i.imgur.com/ljKjsD4.png);
}

的JavaScript：

var yt_player;
function onYouTubeIframeAPIReady() {
    yt_player = new YT.Player('element_id', {
    events: {
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerStateChange(event) {
    if(event.data === YT.PlayerState.ENDED){
        //Display overlay image
        document.getElementById('player_overlay_image').style.display='block';
    }
}

document.getElementById('player_overlay_image').addEventListener('click', function(evt){                                                         
    //Hide overlay image
    document.getElementById('player_overlay_image').style.display='none';

    //Play video
    yt_player.playVideo();
}, false);

（有关详细信息，请参阅YouTube Player API Reference for iframe Embeds。）

http://jsfiddle.net/y3Xqj/1/

Answer 2

我遇到了同样的问题而且它本身并没有解决。这就是我解决问题的方法：

我使用youtube iframe api并在视频结束时将视频重新启动，这样缩略图就像加载页面时一样好看。

YoutubeF是iframe ID。

<强>代码：

var YTplayer;

function onYouTubeIframeAPIReady()
{
    YTplayer = new YT.Player('YoutubeF', { events: { 'onStateChange': onYTPlayerStateChange } });
}

function onYTPlayerStateChange(event)
{
    if (event.data == 0)
    {
        YTplayer.seekTo(0, false)
    }
}

享受！

为什么视频会在结束时返回模糊的拇指？

2 个答案:

HTML：

CSS：

的JavaScript：