Javascript 在youtube视频的末尾显示缩略图
我在移动设备上工作。(iOS) 我有一个Youtube视频的缩略图。单击后,它将消失并在iframe(手机全屏)中自动播放我的视频。它工作得很好 现在我想在离开时(重新)显示缩略图。那我该怎么做呢 HTML:Javascript 在youtube视频的末尾显示缩略图,javascript,html,youtube-api,Javascript,Html,Youtube Api,我在移动设备上工作。(iOS) 我有一个Youtube视频的缩略图。单击后,它将消失并在iframe(手机全屏)中自动播放我的视频。它工作得很好 现在我想在离开时(重新)显示缩略图。那我该怎么做呢 HTML: <script src="https://www.youtube.com/player_api"></script> <div id="yt"> <img src="http://img.youtube.com/vi/sftuxbvGwi
<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>
看看你的功能:
$("#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";
}
}
我希望这有帮助
祝你好运
$("#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";
}
}