在 youtube 视频末尾显示缩略图答案

【问题标题】：Show thumbnail at end of youtube video在 youtube 视频末尾显示缩略图
【发布时间】：2013-07-02 13:33:41
【问题描述】：

我正在使用移动设备。 (iOS)

我的 Youtube 视频有一个缩略图。单击时，它会消失并在 iframe 中自动播放我的视频（在移动设备上全屏）。它工作得很好。

现在我想在我离开时（重新）显示缩略图。那么我该怎么做呢？

HTML：

<script src="https://www.youtube.com/player_api"></script>

<div id="yt">
    <img src="http://img.youtube.com/vi/sftuxbvGwiU/default.jpg" id="thumb"/>
    <div id="ytplayer"></div>
</div>

Javascript：

var 播放器；

$("#yt").click(function(){
   $("#thumb").hide();
   player = new YT.Player('ytplayer', {
      height: '90',
      width: '120',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      videoId: 'sftuxbvGwiU'
    });
});

【问题讨论】：

标签： javascript html youtube-api

【解决方案1】：

看看你的函数：

$("#yt").click(function(){

   //Here you hide the thumb
   $("#thumb").hide();

   player = new YT.Player('ytplayer', {
      height: '90',
      width: '120',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      videoId: 'sftuxbvGwiU'
    });
});

如您所见，您将拇指隐藏在函数中。

所以我们要做的就是找出视频何时结束，然后再次显示#thumb：

$("#yt").click(function(){
   $("#thumb").hide();
      player = new YT.Player('player', {
      height: '90',
      width: '120',
      videoId: 'sftuxbvGwiU',
      playerVars: { 'autoplay': 1, 'controls': 0 },
      events: {
        'onStateChange': onPlayerStateChange
      }
    });
}    

function onPlayerStateChange(event,element) {
    //When the video has ended
    if (event.data == YT.PlayerState.ENDED) {

        //Get the thumb to appear again 
        $("#thumb").show();

        //Optionally, you can also get rid of the player
        element.style.display = "none";
    }
}

希望对你有所帮助。

祝你好运！

【讨论】：