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

我希望幫助。

祝你好運！