DPlayer 播放本地视频文件时路径怎么写才对？

Zz一泽提问于 2026-03-05 05:37:21 阅读 28

交互

我在用 DPlayer 播放本地 MP4 视频，但一直加载失败，控制台报 404。我试过把视频放在 public 目录下，也试过用相对路径，但都不行。是不是路径写法有问题？

我的 HTML 结构是这样的：

<div id="dplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/dplayer/dist/DPlayer.min.js"></script>
<script>
  const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: {
      url: './video/test.mp4'
    }
  });
</script>

项目是用 Vite 搭的，视频文件放在 public/video/ 下，但就是播不出来，到底该怎么写路径？

DPlayer

我来解答赞 8 收藏

反馈

2 条解答

UX树灿 Lv1

路径写错了，Vite 的 public 目录文件最终会部署到根目录，所以要去掉那个点。

改这样：

const dp = new DPlayer({

  container: document.getElementById('dplayer'),

  video: {

    url: '/video/test.mp4'

  }

});

问题就在于你写了 ./video/test.mp4，这是相对路径，浏览器会把它解析成当前页面的相对位置，而不是服务器根目录。

Vite 的 public 目录本质上就是静态资源根目录，里面的东西部署后直接通过 / 访问就对了。

如果你用的是开发服务器（npm run dev），现在刷新页面应该就能播放了。

2026-03-11 14:04

小静怡 Lv1

Vite项目里处理静态文件路径确实容易踩坑，特别是直接放public目录时。性能上建议你别用相对路径，直接用绝对路径试试看。

把你的代码改成这样：

const dp = new DPlayer({

  container: document.getElementById('dplayer'),

  video: {

    url: '/video/test.mp4' // 注意这个斜杠开头

  }

});

关键点：
1. Vite会把public目录下的文件直接复制到dist根目录
2. 路径开头必须加斜杠表示从网站根目录开始
3. 确保构建后dist目录里确实有video/test.mp4这个文件

另外吐槽下，这种路径问题debug起来最烦了，经常浪费半小时发现就是个斜杠写错了...

2026-03-05 10:06