Youtube API iframe在IE/Edge中刷新后无法播放问题求助

我来帮你搞定这个IE/Edge下刷新页面后YouTube播放器加载失败的问题！结合懒加载思路和兼容性修复，给你几个可行的解决方案：

问题分析 #

你遇到的情况大概率是因为：

• IE/Edge的脚本执行顺序或缓存机制导致，刷新时YouTube IFrame API没有被正确重新初始化
• 首次加载时API异步加载完成后能正常绑定DOM，但刷新时DOM元素还没就绪，API就已经加载完成了

方案一：规范实现懒加载+刷新时重新初始化 #

这个方案通过确保DOM完全就绪后再加载API，同时处理API已缓存的情况，完美解决刷新问题：

修改后的完整代码 #

<?php $yt_id='PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT'; ?>
<div id="player"></div>

<script>
// 等待DOM完全加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 检查YouTube API是否已加载，避免重复请求
    if (!window.YT) {
        var tag = document.createElement('script');
        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }

    // 播放器初始化核心函数
    function initYouTubePlayer() {
        var playlistId = "<?php echo $yt_id; ?>";
        
        new YT.Player('player', {
            height: '360',
            width: '640',
            playerVars: {
                'listType': 'playlist',
                'list': playlistId,
                'autoplay': 1,
                'shuffle': 1, // 原生开启播放列表随机播放
                'controls': 1
            },
            events: {
                'onReady': function(event) {
                    // 确保刷新时播放器能正常启动
                    event.target.playVideo();
                }
            }
        });
    }

    // 如果API已经加载完成，直接初始化；否则绑定全局回调
    if (window.YT && window.YT.Player) {
        initYouTubePlayer();
    } else {
        window.onYouTubeIframeAPIReady = initYouTubePlayer;
    }
});
</script>

关键优化点 #

• 用DOMContentLoaded确保只有当所有DOM元素加载完成后才处理播放器逻辑，避免刷新时找不到#player元素
• 检查window.YT是否存在，避免重复加载API，同时兼容刷新时API已缓存的场景
• 利用YouTube播放器原生的shuffle参数实现随机播放，不用自己处理视频列表的随机逻辑
• 在onReady事件中主动调用playVideo()，确保IE/Edge刷新时播放器能正常启动

方案二：针对IE/Edge的兼容性特殊处理 #

如果方案一仍然有问题，试试这个专门针对IE/Edge的修复，解决其对异步脚本的特殊处理逻辑：

<?php $yt_id='PLFgquLnL59anYA8FwzqNFMp3KMcbKwMaT'; ?>
<div id="player"></div>

<!-- 用defer确保脚本在DOM加载后执行 -->
<script src="https://www.youtube.com/iframe_api" defer></script>
<script>
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '360',
        width: '640',
        playerVars: {
            'listType': 'playlist',
            'list': "<?php echo $yt_id; ?>",
            'autoplay': 1,
            'shuffle': 1
        },
        events: {
            'onReady': function(event) {
                // 针对IE/Edge的延迟播放处理，避免刷新时卡顿
                var isIEorEdge = navigator.userAgent.indexOf('MSIE') !== -1 || 
                                navigator.appVersion.indexOf('Trident/') > 0 || 
                                navigator.userAgent.indexOf('Edge') !== -1;
                
                if (isIEorEdge) {
                    setTimeout(function() {
                        event.target.playVideo();
                    }, 500);
                }
            }
        }
    });
}

// 页面刷新时销毁旧播放器并重新初始化
window.addEventListener('load', function() {
    if (window.YT && player) {
        player.destroy();
        onYouTubeIframeAPIReady();
    }
});
</script>

关键修复点 #

• 用defer属性确保API脚本在DOM完全加载后执行
• 通过UA判断识别IE/Edge，添加500ms延迟播放，解决刷新时播放器卡住的问题
• 在load事件中销毁旧播放器并重新初始化，确保刷新时状态完全重置

方案三：强制避免API缓存问题 #

IE/Edge可能会缓存YouTube API脚本，导致刷新时没有触发onReady回调，试试给API地址加时间戳强制刷新：

// 替换方案一中的API加载代码
tag.src = "https://www.youtube.com/iframe_api?v=" + new Date().getTime();

这样每次加载API都是最新的，彻底避免缓存的旧脚本导致的执行问题。

建议先尝试方案一，它是最规范的懒加载实现，能覆盖大部分场景；如果还是有问题，再结合方案二的IE/Edge特殊处理或者方案三的缓存控制。

内容的提问来源于stack exchange，提问作者RobbTe