在YouTube视频结尾处显示缩略图

Question

我正在使用移动设备。 （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' 
    }); 
}); 

Answer 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"; 
    } 
} 

我希望帮助。

祝你好运！