为什么视频最后会返回模糊的拇指？答案

【问题标题】：Why does video return to blurry thumb at end?为什么视频最后会返回模糊的拇指？
【发布时间】：2014-08-07 03:28:15
【问题描述】：

我的嵌入代码中有 rel=0，所以当视频结束时它会返回到开头。但是它正在显示视频的缩略图，返回后，缩略图被放大到完整的视频大小，因此图像非常模糊。如何获取我上传的完整 1280 x 720 图像以显示拇指？

谢谢

【问题讨论】：

您能否发布您的完整嵌入代码（带有 videoID）以便其他人可以查看它？
您可以通过单击zackel.com 上的“Zackel 简介”视频来观看视频，并在视频结束时看到那里的问题。那里使用的嵌入代码是
该页面现在按我预期的方式工作，当视频结束并返回开始时显示 1280x720 图像。？？？！！！我没有改变任何东西。
有时会发生这些类型的后端问题，然后工程师会解决它们。很高兴现在一切顺利！
可能，如果它很普遍（尽管我在错误跟踪器中没有看到任何内容）。 IT 也可能是一个无关紧要的问题，由他们正在处理的其他事情或某处服务器中的错误配置等引起。

标签： youtube youtube-api thumbnails

【解决方案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/

【讨论】：

听起来很有趣。我希望你完成它。

【解决方案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)
    }
}

享受吧！

【讨论】：