HTML5 DPlayer播放器不刷新页面就无法加载问题该如何修复？

DevOps 小满

2026-10-6

问题根因

错误调用DOM元素的load()方法：document.getElementById('dplayer').load()针对的是普通div元素，原生div没有对应load方法，对播放器加载完全无效，应该调用DPlayer实例的重载方法
未处理旧实例销毁逻辑：如果是动态路由/局部刷新场景，重复初始化同一个容器的DPlayer会导致实例冲突，无法加载新的视频资源
语言参数配置错误：lang:'zh-en'是非法值，DPlayer合法语言参数为zh-cn/en/ja等，非法参数会导致初始化异常
未兼容DOM加载时序：如果JS执行早于DOM渲染，会出现获取容器为空的问题，首次初始化失败，刷新后DOM已渲染才正常加载

修复方案

初始化前先销毁已存在的DPlayer实例，避免重复初始化冲突
修正非法的lang参数配置
移除无效的DOM load调用，改用DPlayer实例内置方法加载视频
新增DOM加载完成的判断，确保初始化时容器已存在

修复后完整代码

<!--IsvideoFileStart-->
<link class="dplayer-css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<div class="nexmoe-item">
    <div class="mdui-center" id="dplayer"></div>
</div>
<script>
// 先判断是否存在旧实例，有则销毁
if (window.dp) {
    window.dp.destroy();
}
// 确保DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    window.dp = new DPlayer({
        container: document.getElementById('dplayer'),
        lang: 'zh-cn', // 修正为合法语言参数
        video: {
            url: '<!--FileDownUrl-->',
            type: 'auto'
        }
    });
    // 手动触发加载调用实例的load方法
    window.dp.load();
})
</script>
<!--IsvideoFileEnd-->