我在移动设备上工作。 (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:
变量播放器;
$("#yt").click(function(){
$("#thumb").hide();
player = new YT.Player('ytplayer', {
height: '90',
width: '120',
playerVars: { 'autoplay': 1, 'controls': 0 },
videoId: 'sftuxbvGwiU'
});
});
最佳答案
看看你的函数:
$("#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";
}
}
希望对您有所帮助。
祝你好运!
关于javascript - 在 youtube 视频末尾显示缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17427026/