我的代码有问题。 我想在暂停或退出全屏时刷新页面。 全屏退出有效。 使用 youTube iframe API 的暂停不会“onstatechange”。 我可能会错过任何建议吗？看来 onstatechange 没有被接收到。 我构建“onYouTubeIframeAPIReady()”的方式是否存在问题？ 我已按照文档进行操作，但当视频暂停时，它仍然不会刷新。
谢谢
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
width: 80%;
margin: 0 auto;
}
.responsive-video {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.responsive-video iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
</style>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div class="container">
<div class="responsive-video">
<iframe id="youtubeIframe" width="560" height="315" src="https://www.youtube.com/embed/oJUvTTGVdTMyY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<script>
var player;
var iframe = document.getElementById('youtubeIframe');
var src = iframe.src;
function onYouTubeIframeAPIReady() {
console.log('YouTube IFrame API Ready');
player = new YT.Player('youtubeIframe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
console.log('Player Ready');
}
function onPlayerStateChange(event) {
console.log('Player State Changed:', event.data);
if (event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED) {
console.log('Playback stopped or paused, reloading the player');
setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
}
}
function reloadPlayer() {
console.log('Reloading player');
iframe.src = src; // Reset the src attribute to reload the iframe
}
function checkFullscreen() {
if (!document.fullscreenElement &&
!document.webkitFullscreenElement &&
!document.mozFullScreenElement &&
!document.msFullscreenElement) {
console.log('Exiting fullscreen, reloading the player');
setTimeout(reloadPlayer, 100); // Call the reload function after a short delay
}
}
// Add event listeners for fullscreen change
document.addEventListener('fullscreenchange', checkFullscreen);
document.addEventListener('webkitfullscreenchange', checkFullscreen);
document.addEventListener('mozfullscreenchange', checkFullscreen);
document.addEventListener('MSFullscreenChange', checkFullscreen);
window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
</script>
</body>
</html>
只需在 URL 末尾添加此代码
?enablejsapi=1https://www.youtube.com/embed/oJUvTTGVdTMyY?enablejsapi=1这将能够使用 JS 控制玩家事件
并且在
reloadPlayeronYouTubeIframeAPIReady();