谢谢您[[Mihail Minkov帮助我为YouTube API奠定了坚实的基础。由于我要显示播放列表而不是单个视频，因此不得不调整您给我的内容。
代码HTML <body class="center">
<div class="navbar">
<a href="/index.html">Home</a>
<a href="/main/application.html">Application</a>
<a href="/main/games.html">Games</a>
<a href="/main/leadership.html">Leadership</a>
<a href="#Social" class="active">Social Media</a>
<a href="#Social" class="active">Social Media</a>
</div>
<div class="top">
<input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); pauseVideo();">
<input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); pauseVideo();">
</div>
<div id="player"></div>
<div id="twitter" hidden>
<a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</body>
JavaScript
var done = false; var player; var tag = document.createElement('script'); var firstScriptTag = document.getElementsByTagName('script')[0]; tag.src = "https://www.youtube.com/iframe_api"; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); function img(x) { if (x == 0) { document.getElementById('player').style.display = 'none'; document.getElementById('twitter').style.display = 'block'; } else { document.getElementById('player').style.display = 'block'; document.getElementById('twitter').style.display = 'none'; } return; } function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '600', width: '900', playerVars: { listType: 'playlist', list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e' } }); } function onPlayerReady(event) { event.target.playVideo(); } function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING && !done) { setTimeout(stopVideo, 6000); done = true; } } function pauseVideo() { player.pauseVideo(); } function playVideo() { player.playVideo(); }
这是当我在YouTube<div>和Twitter<div>问题之间切换时播放/暂停的修复方法。
此外，<div align="center">已过时。您应该使用<div style="text-align: center;">之类的内联样式，或者定义一个text-center类，然后将其应用于div之类的<div class="text-center">。
[另外，从显示的内容看，您具有静态代码，但是使用YouTube JavaScript API，您只需要<div id="player"></div>元素，并使用JavaScript初始化所有内容。您可以看到this example here。
如果必须修改您的示例，我可能会做类似的事情：
HTML
<div style="text-align: center;">
<input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); playVideo();">
<input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); stopVideo();">
</div>
<div id="player"></div>
<div id="tw" style="text-align: center;" hidden>
<a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
JavaScript
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars:
{
listType:'playlist',
list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e'
}
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function playVideo() {
player.playVideo();
}
function stopVideo() {
player.stopVideo();
}
</script>
我混合了您想做的事情和Youtube Player API文档中的示例。不知道这是否可以解决您的问题，但我认为您应该检查一下。